Question

无论如何，在一个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，如上所述here：

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

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

Answer 1

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

HTML - 将SVG图像包含为MFString

1 个答案: