Cómo hacer que el ancho de trazo sea inmune a la matriz de transformación actual

En SVG (y Canvas, Quartz, Postscript, ...), la matriz de transformación afecta tanto a las coordenadas de ruta como a la anchura de línea. ¿Hay alguna manera de hacer un ajuste para que el ancho de la línea no se vea afectado? Es decir, en el siguiente ejemplo, la escala es diferente para X e Y, lo que hace que el cuadrado se convierta en un rectángulo, lo que está bien, pero también hace que las líneas sean más anchas en ambos lados.Cómo hacer que el ancho de trazo sea inmune a la matriz de transformación actual

<g transform="rotate(30) scale(5,1) "> 
     <rect x="10" y="10" width="20" height="20" 
      stroke="blue" fill="none" stroke-width="2"/> 
    </g>

rectangle width scaled pen

puedo ver que sería útil en muchos casos, pero hay una manera de optar por ella? Supongo que me gustaría tener una pluma independiente TM o poder configurar la pluma para que sea una elipse que la CTM convierte en un círculo, pero no veo nada de eso.

Sin eso, creo que no debo decirle a SVG sobre mi CTM y en su lugar, transformar las coordenadas, lo que significa convertir primitivas como rect en sus path equivalentes.

Fuente

2012-04-27 xan

duplicado: http://stackoverflow.com/questions/10160262/draw-a-line-that-doesnt-get-thicker-when-image-stretches –

Editar:

No es un atributo que puede agregar a su rect para conseguir exactamente este comportamiento:

vector-effect="non-scaling-stroke"

Esto estaba mal:

Esto funcionará si aplique la transformación directamente a la forma, no al grupo en el que se encuentra. Por supuesto, si desea agrupar varios elementos y escalarlos todos juntos, ese enfoque no funcionará.

<rect x="10" y="10" width="20" height="20" 
      stroke="blue" fill="none" stroke-width="2" 
      transform="rotate(30) scale(5,1)"/>

Esto también puede depender de su visor SVG; Inkscape renderiza su archivo de la manera que desee (el ancho del trazo no se ve afectado por la escala) pero Chrome lo representa como lo ha mostrado.

Fuente

2012-04-27 20:24:04

Interesante, pero creo que Chrome es correcta. La especificación SVG (1.1) dice que el atributo de transformación se aplica primero y que es equivalente a – xan

Sí, creo que tienes razón, y eso significa mi respuesta no funcionará, porque la probé en Inkscape y no en Chrome. –

OK, encontré una mejor respuesta [aquí] (http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke). –

En postscript, describir la ruta y realizar el trazo son eventos separados, por lo que es perfectamente posible tener una TM "pluma" por separado.

%!PS 
%A Funky Shape 

matrix currentmatrix %save normal matrix for stroke pen 
306 396 translate 
72 72 scale 
1 1 5 { pop 
    360 5 div rotate 
    1 0 translate 
    0 0 moveto 
    1 1 5 { pop 
     360 5 div rotate 
     1 0 translate 
     1 0 lineto 
     -1 0 translate 
    } for 
    -1 0 translate 
    closepath 
} for 
setmatrix 
[ 1 -3 4 2 0 0 ] concat %put some skew in the pen 
10 rotate  %makes it look more "organic" 
stroke 
showpage

Fuente

2012-04-30 02:59:27

Cómo hacer que el ancho de trazo sea inmune a la matriz de transformación actual

Respuesta

Cuestiones relacionadas