Html 对于大于300150的大小,未绘制Firefox SVG rect大小

Html 对于大于300150的大小,未绘制Firefox SVG rect大小,html,firefox,web,svg,rect,Html,Firefox,Web,Svg,Rect,以下JSFIDLE在chrome中正常工作,但在firefox中不能正常工作(至少在16和21中) (查找rect的大小) 事实上,它在Chrome中工作不正常,在Firefox中工作正常 在html中嵌入SVG时,通常需要设置宽度和高度 根据 最外层svg元素上的“宽度”属性确定视口的宽度,除非满足以下条件: SVG内容是通过引用嵌入的单独存储的资源(例如XHTML[XHTML]中的“object”元素),或者SVG内容内嵌在包含文档中 引用元素或包含文档的样式使用CSS[CSS2]或XS

以下JSFIDLE在chrome中正常工作,但在firefox中不能正常工作(至少在16和21中) (查找rect的大小)


事实上,它在Chrome中工作不正常,在Firefox中工作正常

在html中嵌入SVG时,通常需要设置宽度和高度

根据

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

  • SVG内容是通过引用嵌入的单独存储的资源(例如XHTML[XHTML]中的“object”元素),或者SVG内容内嵌在包含文档中
  • 引用元素或包含文档的样式使用CSS[CSS2]或XSL[XSL]
  • 在引用元素(例如“object”元素)或包含文档的最外层svg元素上指定了与CSS兼容的定位属性([CSS2],第9.3节),这些属性足以确定视口的宽度
在这些条件下,定位属性将确定视口的宽度

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

我想我添加了它,现在它也可以在firefox中使用。但是如果没有宽度和高度,我就不知道问题所在。
    <svg>
<g>
    <rect y="0" x="0" width="400"  height="463"  />
</g>
</svg>