9

我有一个包含 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”。

4

2 回答 2

6

您需要有一个 HTML 主体作为外来对象的子元素。一旦你有了它，你就可以把任何东西放在体内。

于 2012-07-13T13:41:39.677 回答
2

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

<!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>
于 2016-05-09T20:07:03.117 回答