将此SVG片段直接嵌入到DTD XHTML 1.0 Strict提供的XHTML正文中
<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示例以查看整个圆圈？
答案 0 :(得分：9)
1）每个SVG规范的最外<svg>默认为overflow:hidden。
2）最外层<svg>的大小与每个http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width和http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height的任何其他CSS替换元素的大小一致，并且针对您的情况（没有指定内在高度，宽度和高度）因为100％但包含块可能具有自动高度），其高度为150px。
Chrone似乎只是在这里有错误：它使用视口而不是实际的包含块作为<svg>高度的百分比基础。
答案 1 :(得分：3)
您应在width元素上指定height和<svg>。当省略此操作时，Firefox默认为任意高度，这会导致剪切的视口。