0

无论如何，在一个 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>

你能知道如何将 HTML 生成的 SVG 包含到 X3DOM 中，而不需要外部 SVG 图像吗？

4

1 回答 1

0

显然你可以使用你的 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-19T13:30:29.943 回答