raw - Ancho de trazo fijo en SVG

plotly

Question

Me gustaría poder configurar el ancho del 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.

El contexto sigue

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

Como puede ver, he configurado viewBox para que el origen esté en el centro. Me gustaría dibujar un eje x y un eje y dentro de ese elemento, 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 1px de ancho. No me interesan los ejes que engordan cuando escalo el elemento svg principal.

¿Así que estoy jodido?

Answer 1

Puede usar el conjunto de propiedades vector-effect para non-scaling-stroke , vea los documentos . 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 el CTM y aplicarlo en los elementos que no deberían escalar.

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