HTML-包括SVG图像作为MFString

在一个HTML文件中，是否可以包含作为MFString生成的SVG？

我的情况如下。假设有一个简单的SVG绘图，如：

<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中，background字段backURL将参数作为MFString，如下所述：

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

您能介绍一下如何在不需要外部SVG图像的情况下将HTML生成的SVG包含到X3DOM中吗？

显然，您可以使用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>

相关内容

最新更新

热门标签：