HTML

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

HTML - Include SVG image as MFString

svg

x3dom