Ancho de trazo fijo en SVG

Me gustaría poder establecer el ancho del trazo en un elemento SVG para que sea "consciente de los píxeles", que siempre tenga 1 px de ancho independientemente de las transformaciones de escala actuales aplicadas. Soy consciente de que esto puede ser imposible, ya que el objetivo de SVG es ser independiente de los píxeles.

El contexto sigue:

Tengo un elemento SVG con sus atributos viewBox y preserveAspectRatio establecidos. Se parece a 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 escalo ese elemento, las formas reales dentro de él escalan en consecuencia (hasta ahora todo bien).

Como puede ver, he configurado el viewBox para que el origen esté en el centro. Me gustaría dibujar un eje xy un eje y dentro de ese elemento, lo que hago así:

<line x1="-1000" x2="1000" y1="0" y2="0" />

Nuevamente, esto funciona bien. Idealmente, sin embargo, este eje siempre tendría solo 1 px de ancho. No tengo interés en que los ejes se vuelvan más gruesos cuando escalo el elemento svg principal.

Entonces, ¿estoy jodido?

Puede utilizar la vector-effectpropiedad establecida en non-scaling-stroke, consulte los documentos . Otra forma es utilizar transform(ref).

Eso funcionará en navegadores que admitan 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 invirtiendo la CTM y aplicándola en los elementos que no deberían escalar.

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