为什么Firefox似乎会截断嵌入式SVG？

Question

将这段SVG直接嵌入到XHTML的主体中 DTD XHTML 1.0 Strict

<svg>
    <circle cx="150" cy="150" r="150"/>
</svg>

使用Chrome 在http://jsfiddle.net/3NXbL上查看此示例(我使用的是11.0.696.57)可以看到整个圆圈.

使用Firefox查看相同的jsfiddle(我使用的是4.0.1).可以看到相同的圆圈,但在垂直方向上切成两半.

(注意我在其他版本的Firefox上看到了完全相同的行为,不同的doc类型和包含SVG内容的不同方法,但这被简化为jsfiddle的一个非常简单的例子)

什么是Firefox为网页中的SVG内容分配维度的规则？有没有简单的方法可以让它们与其他浏览器保持一致？您如何修改我的jsfiddle示例以查看整个圆圈？

Answer 1

1)每个SVG规范的最外<svg>默认值overflow:hidden.

2)根据http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width和http://www.w3<svg>,确定最外层的大小与任何其他CSS替换元素的大小相同. org/TR/CSS21/visudet.html#inline-replacement-height和你的情况(没有内部高度,宽度和高度指定为100%,但包含块可能有自动高度),高度为150px.

Chrone似乎只是在这里有错误:它使用视口而不是实际的包含块作为<svg>高度的百分比基数.