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

Question

将此段嵌入XHTML正文中的SVG片段与使用DTD XHTML 1.0 Strict相结合。

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

在Chrome中（我使用的是11.0.696.57版本），访问http://jsfiddle.net/3NXbL，可以看到整个圆。

在Firefox中（我使用的是4.0.1版本），访问同样的jsfiddle。可以看到相同的圆，但是它被竖直地切成了一半。

Firefox在网页中为SVG内容分配尺寸的规则是什么？有没有简单的方法来使其与其他浏览器一致？如何修改我的jsfiddle示例以查看整个圆？

- Jim Blackler

Answer 1

1) 根据SVG规范，最外层的<svg>默认为overflow:hidden。

2) 最外层<svg>的大小与任何其他CSS替换元素一样，根据http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width和http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height确定。对于您的情况（没有固有高度，宽度和高度指定为100％，但包含块可能具有自动高度），这将给出高度为150px。

这里Chrome似乎有问题：它使用视口而不是实际包含块作为<svg>高度的百分比基数。

- Boris Zbarsky

Answer 2

在<svg>元素上应该指定宽度和高度。如果省略此项，Firefox会默认一个任意的高度，这会导致被裁剪的视口。

- bobince