4

我想使用 JavaScript 在嵌入 svg 的 html5 画布上绘制（在 html5 页面中）。如果这样做，在“cvs”上绘图就可以了：

<svg id="fig" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024">
  <foreignObject x="0" y="0" width="512" height="512">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <canvas id="cvs" width="512" height="512"></canvas>
    </body>
  </foreignObject>
</svg>

但如果使用画布完成并在使用标签中引用，则不会。图纸根本没有出现。在 Safari 中检查元素告诉我使用元素的尺寸是 NaN x NaN；Firebug 说 0x0。

<svg id="fig" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024">
  <defs>
    <foreignObject id="circles" x="0" y="0" width="512" height="512">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <canvas id="cvs" width="512" height="512"></canvas>
      </body>
    </foreignObject>
  </defs>
  <use x="0" y="0" xlink:href="#circles"></use>
</svg>

这是一个错误吗？预期的行为？我只是不明白如何使用foreignObject（很可能）？

4

1 回答 1

0

您不能直接指向 foreignObject 元素，它在SVG 规范中是这样说的

'svg', 'symbol', 'g', graphics element or other 'use' only. 因此，您可以指向一个<g>or<svg>元素，<foreignObject>例如，该元素具有一个子元素。

于 2012-12-18T16:38:00.507 回答