gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 05:02:29 25 4
gpt4 key购买 nike

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

一个简单的结构化 html,带有一个宽度和高度为 700 像素的 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 调试器显示的大小与 svgRoot.getBBox() 的结果相同,即实际的 svg 内容边界大小。

为避免此问题,放置一个与 Canvas 大小相同的不可见矩形或其他形状以占据 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>

关于firefox - SVG 无法在 Firefox 中设置宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15044635/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com