En SVG (y Lienzo, Cuarzo, Postscript, …), la matriz de transformación afecta a la ruta de acceso coordenadas y el ancho de la línea. Es allí una manera de hacer un ajuste de modo que la anchura de la línea no se ve afectada? Es decir, en el ejemplo siguiente, la escala es diferente de X y y, que hace que el cuadrado en un rectángulo, que es bueno, pero también hace que las líneas más amplia en los dos lados.

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

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

Puedo ver que podría ser muy útil en muchos casos, pero hay una manera de optar por ella? Supongo que me gustaría tener una pluma separada TM o ser capaz de poner la pluma al ser una elipse que la marca se convierte en un círculo, pero no veo nada de eso.

A falta de ello, creo que tengo para no decir SVG sobre mi marca comunitaria y en lugar de transformar las coordenadas a mí mismo, lo que significa que la conversión de tipos primitivos como rect a sus path equivalentes.

InformationsquelleAutor xan | 2012-04-27

2 Comentarios

  1. 45

    Edición:

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

    vector-effect="non-scaling-stroke"

    Que esto estaba mal:

    Esto va a funcionar si se aplica la transformación directamente a la forma, no en el grupo en que se encuentra. Por supuesto, si usted quería grupo de varios ítems y la escala de todos ellos juntos, ese enfoque no funciona.

    <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 hace que el archivo de la manera que usted desea (ancho de trazo no se ve afectado por la escala), pero Chrome hace él, como se ha demostrado.

    • Interesante, pero creo que Chrome es correcta. El SVG (1.1) especificación dice la transformación de atributo se aplica por primera vez y que <rect … transformar…> es equivalente a <g transformar…><rect …/></p>
    • Sí, creo que tienes razón – y eso significa que mi respuesta no funciona, porque he probado en Inkscape y no Chrome.
    • OK, he encontrado una mejor respuesta aquí.
    • Tenga en cuenta que Firefox no tiene en la actualidad (v12) apoyo vector-effect:non-scaling-stroke
    • Gracias, @Russell. Yo no había verificado SVG 1.2.
    • la no ampliación de la escala de ictus de apoyo debe aparecer en Firefox 15. Es en los nightly builds ahora.
    • Soluciones para el caso de que usted está aplicando la transformación para el grupo?

  2. 6

    En postscript, describiendo la ruta y la realización de los accidentes cerebrovasculares son eventos independientes, por lo que es perfectamente posible tener una «pluma» de TM.

    %!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

Dejar respuesta

Please enter your comment!
Please enter your name here