HTML - Include SVG Bild als MFString

Gibt es sowieso, in einer HTML-Datei, können Sie die SVG als eine MFString generiert enthalten?HTML - Include SVG Bild als MFString

Meine Situation ist wie folgt. Lassen Sie uns sagen, dass es eine einfache SVG ziehen wie:

<svg id="wanna-be-background" width="400" height="110"> 
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"> 
    Sorry, your browser does not support inline SVG. 
</svg>

Und in X3DOM, das background Feld als MFString in Argument backURL zu nehmen, wie here beschrieben:

<background backurl="<wanna-be-background>"></background>

Können Sie einige, wie gehören die SVG erzeugt von HTML zu X3DOM, ohne dass ein externes SVG-Bild benötigt wird?

Quelle

2016-04-19 Quang Thinh Ha

Anscheinend können Sie es mit einer DataURI-Version Ihrer Svg Markup tun.

Allerdings habe ich einige Fehler zunächst erfahren, während Tests zu tun, so kann es einige Einschränkungen sein ...

Hier ist ein Beispielcode:

// the svg to use 
 
var svgEl = document.getElementById('wanna-be-background'); 
 
// serialize it to a string 
 
var svgStr = new XMLSerializer().serializeToString(svgEl); 
 
svgEl.parentNode.removeChild(svgEl) 
 
// convert this string to a dataURI one 
 
var dataURI = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgStr); 
 

 
//set your background's attributes 
 
bg.setAttribute('frontURL', dataURI); 
 
bg.setAttribute('backURL', dataURI); 
 
bg.setAttribute('topURL', dataURI); 
 
bg.setAttribute('bottomURL', dataURI); 
 
bg.setAttribute('leftURL', dataURI); 
 
bg.setAttribute('rightURL', dataURI); 
 

 
// works also for imageTexture's url 
 
iT.setAttribute('url', dataURI.replace('red', 'blue'))

<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> 
 
</script> 
 
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link> 
 
</head> 
 

 
<body> 
 

 
    <x3d width='600px' height='400px'> 
 
    <scene> 
 
     <shape> 
 
     <appearance> 
 

 
      <ImageTexture id="iT" metadata='X3DMetadataObject'></ImageTexture> 
 
     </appearance> 
 
     <box></box> 
 
     </shape> 
 
     </transform> 
 
     <background id="bg"></background> 
 
    </scene> 
 
    </x3d> 
 

 
    <svg id="wanna-be-background" width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 

 
    <polygon points="60,20 100,40 100,80 60,100 20,80 20,40" fill="red" /> 
 

 
    </svg>

Quelle

2016-04-19 13:30:29 Kaiido

HTML - Include SVG Bild als MFString

Antwort

Verwandte Themen