在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中完美呈現。

感謝您的幫助！

來源

2012-04-27 wookie924

您需要將寬度和高度屬性添加到<svg>元素。寬度=「100％」和高度=「100％」可能適合您的情況。

來源

2012-04-27 15:41:43

感謝您的回答。它在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

在firefox中渲染內聯SVG

回答

相關問題