SVG无法在firefox中设置宽度和高度

时间:2013-02-23 19:27:13

标签: firefox svg

我想解决这个非常烦人的问题......

一个简单的结构化html,带有svg元素,宽度和高度为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>  

问题是为什么在没有firefox的宽度和高度的情况下显示svg? 在铬,即它的100%工作;

请帮我解决这个问题。

此处是问题的屏幕截图:http://shaharmesh.hostingsiteforfree.com/differance.jpg

1 个答案:

答案 0 :(得分:0)

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>