SVG 无法在 Firefox 中设置宽度和高度答案

【问题标题】：SVG cannot set width and height in firefoxSVG 无法在 Firefox 中设置宽度和高度
【发布时间】：2013-02-09 06:40:46
【问题描述】：

我正在努力解决这个非常烦人的问题......

一个简单的结构化html，带有一个宽度和高度为700px的svg元素：

<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>

问题是为什么 svg 没有在 firefox 中显示宽度和高度？在 chrome 中，即它的工作 100%;

请帮我解决这个问题。

这里是问题的截图：http://shaharmesh.hostingsiteforfree.com/differance.jpg

【问题讨论】：

有什么问题？ Firefox 和 Opera 在这里的显示几乎相同。
我添加了一张照片，以便更好地了解我遇到的问题。 shaharmesh.hostingsiteforfree.com/differance.jpg
我需要所有浏览器上的 svg 元素为 700X700...
浅蓝色背景从何而来？它不在您的测试用例中。
我已经更新了截图，希望有人能理解这个问题 - shaharmesh.hostingsiteforfree.com/differance.jpg

标签： firefox svg

【解决方案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>

【讨论】：