Question

在这个简单的例子中，只显示A部分（使用Chromium Version 28.0.1500.71），而不是显示在svg标记之后的B部分。

这是正常的行为吗？为什么，我做错了什么，或者它是Chrome中的错误？

<html>
<body>

<section>
    <H1>THis is section A</H1>
</section>

<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
  </rect>

  <foreignObject x="50" y="20" width="150" height="150">
        <H2>This is H2 text embedded in svg</H2>
  </foreignObject>
</svg>
</div>

<section>
    <H1>This is section B and should be displayed</H1>
</section>


</body>
</html>

Answer 1

Firefox会相应地显示数据。所以这是Chromium Version 28.0.1500.71中的一个错误。

编辑：正如评论者所说，放置宽度和/或高度足以进行正确的渲染。因此，话虽如此，它只是一个小错误。

svg标签隐藏在html体内的任何内容之后

1 个答案: