logo标签列表

SVG foreignObject在Chrome中不显示

javascripthtmlfirefoxgoogle-chromejquery-svg
9

我有一个包含div的foreignObject的SVG元素。然后在我的JS中，我这样做：

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

它在div内部创建了一个画布。当我查看Firebug的HTML代码时，两个浏览器的代码如下：

Firefox：

<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>");

火狐浏览器的表现符合我的期望，但谷歌浏览器不行。有人有什么建议吗？

另外，我认为问题的一部分在于谷歌浏览器的Firebug HTML输出显示“foreignobject”，而火狐则显示我添加的“foreignObject”。

2个回答
6
你需要将HTML body作为foreignobject的子元素。一旦完成这一步骤，你就可以在body内放置任何内容。
可能值得更新一下，因为Chrome似乎已经改变了它的行为，子元素现在必须用<xhtml></xhtml>包装 - 奇怪的是Edge无论如何都不关心。对于这两个浏览器都不需要命名空间（但其他浏览器可能仍然会挑剔）。 - dav1dsm1th
3

补充一下，这里有一些标记。Chrome和Firefox的行为不同，这些样式标签消除了差异（添加到html reset中？）。显然你并不需要一个HTML body，而更需要在标记上引用命名空间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>
我发现了与Chrome浏览器相关的主要问题，即需要省略foreignObject中的requiredExtensions属性。 - phil294
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接