HTML - MFStringとしてSVGイメージを含める

とにかく、1つのHTMLファイルにMFStringとして生成されたSVGを含めることはできますか？HTML - MFStringとしてSVGイメージを含める

私の状況は以下の通りです。 hereが説明するようにbackgroundフィールドbackURLは、MFStringとして引数に取る、

<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>

そしてX3DOMで：のは、シンプルなSVGのようにそこ描くれるとしましょう

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

あなたには、いくつかの方法がSVGを生成含めることができますHTMLからX3DOMへ、外部SVGイメージなしで

出典

2016-04-19 Quang Thinh Ha

明らかに、あなたのsvgマークアップのdataURIバージョンを使用して行うことができます。

は、しかし、私はテストをしながら最初にいくつかのバグを経験したので、いくつかの注意点があるかもしれません...ここで

はサンプルコードです：

// 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>

出典

2016-04-19 13:30:29 Kaiido

HTML - MFStringとしてSVGイメージを含める

答えて

関連する問題