SVG foreignObject未在Chrome中显示

Question

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

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

在div中创建一个画布.当我看两个浏览器的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>

铬:

<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 firebug HTML输出显示"foreignobject",但Firefox以我追加的方式显示"foreignObject".

Answer 1

您需要将HTML主体作为foreignobject的子元素.一旦你有了它,你可以把任何东西放在体内.