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

将这个SVG片段直接嵌入带有

DTD XHTML1.0 Strict

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

在使用Chrome（我使用的是11.0.696.57）查看此示例，可以看到一个完整的圆圈

使用Firefox查看相同的JSFIDLE（我使用的是4.0.1）。可以看到相同的圆，但在垂直方向上被切成两半

（注意，我在其他版本的Firefox上看到了完全相同的行为，不同的文档类型和包含SVG内容的不同方法，但这只是一个非常简单的JSFIDLE示例）

---

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

您应该在

元素上指定

宽度和
高度。如果忽略此选项，Firefox将默认为任意高度，这将导致裁剪视口。
1）根据SVG规范，最外层的
默认为
溢出：隐藏

2） 最外面的
的大小与任何其他CSS替换元素的大小相同，并且对于您的情况（没有指定为100%的固有高度、宽度和高度，但包含的块可能具有自动高度），其高度为150px

Chrone在这里似乎有问题：它使用视口而不是实际包含的块作为
高度的百分比基础