我有一个网站,我正在努力创建形状,我们使用通过javascript构建的内联svg。我有一个奇怪的问题,svg在Chrome中正确呈现,但在Firefox中它削减了一部分SVG。下面的代码是一个明星。在铬合金中,这完全显示出来。在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有关。有趣的是,如果我将这颗星做得更小(比这个大小的1/4),它在Firefox中完美呈现。
感谢您的帮助!
答案 0 :(得分:7)
您需要为<svg>
元素添加宽度和高度属性。 width =“100%”和height =“100%”可能适用于您的情况。