在firefox中渲染内联SVG
问题描述：
我有一个网站，我正在努力在哪里我们允许创建形状，并且我们使用通过javascript构建的内联svg来做到这一点。我有一个奇怪的问题，即svg在Chrome中正确呈现，但是在Firefox中它将部分SVG剪掉。下面的代码是一个明星。在铬这显示完美。在Firefox中，我只能看到左上角25％左右的图像。在firefox中渲染内联SVG
<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中完美呈现。
感谢您的帮助！
答
您需要将宽度和高度属性添加到<svg>元素。宽度=“100％”和高度=“100％”可能适合您的情况。
感谢您的回答。它在Firefox中像一个魅力。好棒。谢谢你的帮助。 – wookie924 2012-04-27 16:05:24
为什么只有Firefox需要这个？根据我在规范中看到的，默认值已经是100％（[source]（http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute））。 – 2013-07-22 15:28:14
根据http://www.w3.org/TR/2011/PR-SVG11-20110609/coords.html#ViewportSpace除非满足以下条件，否则最外面的svg元素上的'width'属性会建立视口宽度都满足了，所以没有。 – 2013-08-04 08:02:16