Ancho de trazo fijo en SVG

Question

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.

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?

Answer 1

Puede usar la propiedad vector-effect establecida en non-scaling-stroke, ver the docs. Otra forma es usar transform(ref).

Eso funcionará en los navegadores compatibles con esas partes de SVG Tiny 1.2, por ejemplo Opera 10. La alternativa incluye escribir un pequeño script para hacer lo mismo, básicamente invertir la CTM y aplicarla a los elementos que no deberían escalar .

Si desea líneas más nítidas también puede disable antialiasing (shape-rendering=optimizeSpeed o shape-rendering=crispEdges) y/o jugar con el posicionamiento.