Rendering Inline SVG w FireFox

Mam stronę, nad którą pracuję, gdzie pozwalamy na tworzenie kształtów i robimy to za pomocą wbudowanego svg zbudowanego przez javascript. Mam dziwny problem, w którym svg renderuje się poprawnie w Chrome, ale w Firefoksie odcina część SVG. Poniższy kod to gwiazda. W chromie to widać doskonale. W przeglądarce Firefox widzę tylko lewe górne 25% obrazu.Rendering Inline SVG w FireFox

<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>

Nie jestem pewien, czy robimy coś złego, czy też jest to problem z Firefoksem. Interesujące jest to, że jeśli sprawię, że gwiazda będzie mniejsza (jak 1/4 tego rozmiaru), to doskonale się sprawdzi w Firefoksie.

Dzięki za pomoc!

Źródło

2012-04-27 wookie924

Musisz dodać atrybuty width i height do elementu <svg>. width = "100%" i height = "100%" mogą dobrze działać w twoim przypadku.

Źródło

2012-04-27 15:41:43

Dzięki za odpowiedź. Działa jak urok w Firefoksie. Niesamowite. Dzięki za pomoc. – wookie924

Dlaczego tylko Firefox tego potrzebuje? Z tego, co widzę w specyfikacji, wartości domyślne to już 100% ([źródło] (http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute)). –

Per http://www.w3.org/TR/2011/PR-SVG11-20110609/coords.html#ViewportSpace Atrybut "width" na najbardziej zewnętrznym elemencie svg określa szerokość rzutni, chyba że spełnione są następujące warunki i są spełnione, więc tak nie jest. –

Rendering Inline SVG w FireFox

Odpowiedz

Powiązane problemy