html - 尺寸大于 300,150 的 Firefox SVG 矩形尺寸未绘制

Question

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

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

Answer 1

实际上它在 Chrome 和 Firefox 中正常工作。

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

根据SVG 规范

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

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

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

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