javascript - SVG foreignObject 未在 Chrome 中显示

Question

我有一个带有包含 div 的 foreignObject 的 SVG 元素。然后在我的 js 中我这样做:

$("#wrapper>svg>foreignObject>div").sparkline(data);

在 div 中创建 Canvas 。当我查看两个浏览器的 firebug html 代码时:

火狐:

<svg>
    <foreignObject width="20" height="20" x="10" y="-10">
       <div>
          <canvas style="display: inline-block; width: 18px; height: 19px; vertical-align: top;" width="18" height="19"></canvas>
       </div>
    </foreignObject>
</svg>

Chrome :

<svg>
    <foreignobject width="20" height="20" x="10" y="-10"/>
<svg>

在 chrome 中它甚至不显示 div。我创建div的方式是

nodeEnter.append("foreignObject")
  .attr("width", "20")
  .attr("height", "20")
  .attr("x", "10")
  .attr("y","-10");

$("#wrapper>svg>foreignObject").append("<div></div>");

Firefox 正在运行，正如我所期望的那样。但是 Chrome 没有。有人有什么建议吗？

此外，我认为部分问题在于 chrome firebug HTML 输出显示“foreignobject”，但 Firefox 以我附加的方式显示“foreignObject”。

Answer 1

您需要将 HTML 正文作为 foreignobject 的子元素。一旦有了它，您就可以将任何东西放入体内。