Me gustaría poder configurar el ancho de trazo en un elemento SVG para que sea "compatible con píxeles", que siempre debe tener 1px de ancho, independientemente de las transformaciones de escalado actuales aplicadas. Soy consciente de que esto puede ser imposible, ya que el objetivo de SVG es ser independiente de píxeles.Ancho de trazo fijo en SVG
Contexto de la siguiente manera:
tengo un elemento SVG con su viewBox y preserveAspectRatio atributos establecidos. Se ve algo como esto
<svg version="1.1" baseProfile="full"
viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg" >
</svg>
Esto significa que cuando escala que elemento, las formas reales dentro de la escala que corresponde (hasta ahora tan bueno).
Como puede ver, he configurado el viewBox para que el origen esté en el centro. Me gustaría dibujar una X y un eje y dentro de ese elemento, que lo hago así:
<line x1="-1000" x2="1000" y1="0" y2="0" />
Una vez más, esto funciona bien. Idealmente, sin embargo, este eje siempre tendría solo 1px de ancho. No me interesan los ejes que engordan cuando escalo el elemento svg principal.
¿Así que estoy jodido?
Lamentablemente, esto está en una aplicación XUL, y eso no parece ser compatible con el efecto vector todavía. Oh bien. – wxs
Esto debería aparecer en Firefox 15, todo está bien, así que deberías poder usarlo una vez que construyas tu aplicación XUL en gecko 15. –
IE11 aún no es compatible con la propiedad 'vector-effect'. ¿Es posible lograr el mismo efecto que 'vector-effect: non-scaling-stroke' en IE11? – merlin