在Firefox中呈现内联SVG

5

我正在制作一个网站,允许创建形状,我们使用内联svg通过javascript构建。我遇到了一个奇怪的问题,在Chrome中,SVG正确地呈现,但在Firefox中,它会切掉一部分。下面的代码是一个星形。在Chrome中,这个图像显示得很完美。但在Firefox中,我只能看到大约上左25%的图像。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head></head>
<body>

<svg shape-rendering="" preserveAspectRatio="none">
<polygon transform="rotate(0 100 100)" points="256.53212826312154,13.412653125,314.88080229627076,201.3216034012431,499.6516034012431,201.3216034012431,348.91752881560774,320.0009404178177,382.9542553349448,507.9098906940608,256.53212826312154,389.2305536774862,130.11000119129832,507.9098906940608,164.14672771063536,320.0009404178177,13.412653125,201.3216034012431,198.18345422997237,201.3216034012431,256.53212826312154,13.412653125" fill="rgb(49, 48, 255)" stroke="black" stroke-width="2.49125px" style="position: absolute; ">
</polygon>
</svg>

</body>
</html>  

我不确定我们是否做错了些什么,还是这是Firefox的问题。有趣的是,如果我将星星变小(比这个星星的大小要小四分之一),它可以在Firefox中完美地呈现。

感谢您的帮助!

1个回答

7

您需要在<svg>元素中添加宽度和高度属性。width="100%"和height="100%"可能适用于您的情况。


谢谢你的回答。在Firefox中它完美地运行。太棒了。感谢你的帮助。 - wookie924
为什么只有Firefox需要这个呢?根据规范,我所看到的默认值已经是100%了。[来源](http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute) - Šime Vidas
根据http://www.w3.org/TR/2011/PR-SVG11-20110609/coords.html#ViewportSpace,最外层svg元素上的“width”属性确定了视口的宽度,除非满足以下所有条件,否则不会生效。 - Robert Longson

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接