defs/use 中的 foreignObject 中的画布未显示答案

【问题标题】：canvas in foreignObject in defs/use not displayeddefs/use 中的 foreignObject 中的画布未显示
【发布时间】：2012-12-05 21:44:02
【问题描述】：

我想使用 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>

但如果在 use 标记中使用画布并在其中引用，则不会。图纸根本没有出现。在 Safari 中检查元素告诉我 use 元素的尺寸是 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（很有可能）？

【问题讨论】：

试试<use x="0" y="0" xlink:href="#circles"></use>
@Duopixel Argh，编辑错误。我正在测试的版本在使用标签中确实有#circles 而不是#cvs。我会尝试编辑我的问题来解决这个问题。

标签： svg html5-canvas

【解决方案1】：

你不能直接指向一个foreignObject元素，它在SVG specification中这样说

“svg”、“symbol”、“g”、图形元素或其他“用途”。例如，您可以指向一个 <g> 或 <svg> 元素，其中有一个 <foreignObject> 元素作为子元素。

【讨论】：

我可能误解了你的回答。在最初的问题中，我错误地输入了 xlink:href="#cvs"（我的 foreignObject 中的画布对象）而不是“#circles”（foreignObject 本身）。两者都不起作用。我现在尝试将我的 foreignObject 包装在、
Robert 建议将 foreignObject 包装在 g 或 svg 中并引用它。
@Duopixel 看起来我们的 cmets 越过了。我刚试过；没有运气。
即使我只是将画布放在 foreignObject 中（没有定义，上面的第一个版本），Safari 也会忽略应用于它的转换。（Firefox 正确地进行了转换。）鉴于这个限制，我无论如何都不能使用这种方法，所以没有急于找到解决方案。
我猜你应该在 webkit 上提出一个错误。