firefox - SVG cannot set width and height in firefox

Question

i am tying to solve this problem that is very annoying....

a simple structured html, with an svg element with the width and height of 700px:

<div id="wrapper">
    <div id="gameZone">
        <div id="background">
        <svg id="svgRoot" width="700px" height="700px">
            <circle cx="355" cy="600" r="10" id="ball" />
            <rect id="pad" height="15px" width="150px" x="280" y="670" rx="10" ry="20"/>
        </svg>
        </div>  
    </div>
</div>  

the question is why the hell the svg is displyed without the width and height in firefox? in chrome and ie its working 100%;

please help me solve this problem.

here is an screenshot of the problem: http://shaharmesh.hostingsiteforfree.com/differance.jpg

Answer 1

Firefox 调试器显示的大小与 svgRoot.getBBox() 的结果相同，即实际的 svg 内容边界大小。

为避免此问题，请放置一个与画布大小相同的不可见矩形，或其他形状以占据 svg 的左上角和右下角。

<div id="wrapper">
    <div id="gameZone">
        <div id="background">
        <svg id="svgRoot" width="700" height="700">
            <rect width="100%" height="100%" stroke="none" visibility="hidden" pointer-events="none" />
            <circle cx="355" cy="600" r="10" id="ball" />
            <rect id="pad" height="15" width="150" x="280" y="670" rx="10" ry="20"/>
        </svg>
        </div>
    </div>
</div>