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的子元素。一旦你有了它，你可以把任何东西放在体内。

Answer 2

只是添加到对话中，这里有一些标记。 Chrome和Firefox的行为有所不同，这些样式标签消除了差异（添加到html重置？）您显然不需要HTML主体，就像标签上的命名空间引用xmlns一样，不管是body还是简单div。此外，您可能需要考虑使用svg switch标记来测试支持的功能。

<!doctype html><html><body>

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="300px">
  <foreignObject width="100" height="57">
    <div xmlns="http://www.w3.org/1999/xhtml" style="position:relative;
         width:100px;height:57px;overflow:hidden;font-family:Arial;
         font-weight:400;font-size:12px;line-height:100%;">
           Lorem ipsum dolor sit amet, consectetur adipiscing egplit, sed do eiusmod
           tempor incididunt ut labore
    </div>
  </foreignObject>
</svg>

</body></html>

SVG foreignObject未在Chrome中显示

2 个答案: