Question

我想使用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（极有可能）？

Answer 1

你不能直接指向foreignObject元素，它在SVG specification中说明了

'svg'，'symbol'，'g'，图形元素或其他'use'。因此，您可以指向<g>或<svg>元素，例如将<foreignObject>元素作为子元素。

defs / use中的foreignObject中的canvas没有显示

1 个答案: