Rendering SVG en línea en firefox

Tengo un sitio en el que estoy trabajando donde permitimos la creación de formas y lo hacemos usando svg en línea creado a través de javascript. Tengo un problema extraño, donde svg se representa correctamente en Chrome, pero en Firefox corta una parte del SVG. El código a continuación es una estrella. En Chrome esto aparece perfectamente. En Firefox solo veo la parte superior izquierda el 25% de la imagen o menos.Rendering SVG en línea en 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>

No estoy seguro de si estamos haciendo algo mal o si es un problema con Firefox. Lo interesante es que si hago que la estrella sea más pequeña (como 1/4 del tamaño de esta) se renderiza perfectamente en Firefox.

¡Gracias por la ayuda!

Fuente

2012-04-27 wookie924

Necesita agregar atributos de ancho y alto al elemento <svg>. width = "100%" y height = "100%" bien pueden funcionar para su caso.

Fuente

2012-04-27 15:41:43

Gracias por la respuesta. Funciona como un encanto en Firefox. Tan genial. Gracias por tu ayuda. – wookie924

¿Por qué solo Firefox necesita esto? Según lo que veo en la especificación, los valores predeterminados ya son 100% ([fuente] (http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute)). –

Por http://www.w3.org/TR/2011/PR-SVG11-20110609/coords.html#ViewportSpace El atributo 'ancho' en el elemento svg más externo establece el ancho de la ventana gráfica, a menos que se cumplan las siguientes condiciones y se cumplen todos, por lo que no es así. –

Respuesta

Cuestiones relacionadas