尺寸大于 300,150 的 Firefox SVG 矩形尺寸未绘制答案

【问题标题】：Firefox SVG rect size not drawn for size greater than 300,150尺寸大于 300,150 的 Firefox SVG 矩形尺寸未绘制
【发布时间】：2013-08-09 08:25:11
【问题描述】：

以下 jsfiddle 在 chrome 中正常工作，但在 firefox 中不能正常工作（至少在 16 和 21 中）（寻找矩形的大小） http://jsfiddle.net/ej5Zk/9/

    <svg>
<g>
    <rect y="0" x="0" width="400"  height="463"  />
</g>
</svg>

【问题讨论】：

【解决方案1】：

实际上它在 Chrome 中运行不正确，在 Firefox 中运行正常。

在 html 中嵌入 SVG 时，您通常希望设置宽度和高度

最外层 svg 元素的“width”属性确定视口的宽度，除非满足以下条件：

SVG 内容是通过引用嵌入的单独存储的资源（例如 XHTML [XHTML] 中的“object”元素），或者 SVG 内容内嵌在包含文档中；
并且引用元素或包含文档的样式使用 CSS [CSS2] 或 XSL [XSL]；
并且在引用元素（例如，“object”元素）或包含文档的最外层 svg 元素上指定了与 CSS 兼容的定位属性（[CSS2]，第 9.3 节），这些属性足以建立视口。

在这些条件下，定位属性确定视口的宽度。

由于上述所有条件都成立，因此您需要使用表示显式宽度的样式（因为它映射到样式）或 CSS 宽度属性。似乎大多数其他 UA 都忽略了上述规范要求。

【讨论】：