Ancho de trazo fijo en SVG

103

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?

svg visualization

— wxs
fuente

128

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.

— Erik Dahlström
fuente

Desafortunadamente, esto está en una aplicación XUL, y eso aún no parece admitir el efecto vectorial. Oh bien.

— wxs

Esto debería aparecer en Firefox 15 y todo estará bien, por lo que debería poder usarlo una vez que cree su aplicación XUL en gecko 15.

— Robert Longson

IE11 todavía no admite la vector-effectpropiedad. ¿Es posible lograr el mismo efecto que vector-effect: non-scaling-strokeen IE11?

— Merlin

@merlin sí, con js es posible emular esto en IE.

— Erik Dahlström

@merlin clona el elemento (configurando filla noney viceversa para stroke), calcula y configura las transformaciones apropiadas (una para la parte de relleno y otra para la parte de trazo). Seguro que va a ser un poco complicado, pero ahí está: es posible que también desee pedirle a Microsoft que agregue soporte para él. En cualquier caso, creo que su pregunta merece ser una pregunta propia.

— Erik Dahlström