2012-04-27 13 views
31

In SVG (e Canvas, Quarzo, Postscript, ...), la matrice di trasformazione influisce sulle coordinate del percorso e sulla larghezza della linea. C'è un modo per effettuare una regolazione in modo che la larghezza della linea non sia influenzata? Cioè, nel seguente esempio, la scala è diversa per X e Y, il che rende il quadrato in un rettangolo, che è OK, ma rende anche le linee più larghe su due lati.Come rendere la larghezza del tratto immune alla matrice di trasformazione corrente

<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

posso vedere che sarebbe utile in molti casi, ma c'è un modo di opt-out di esso? Suppongo che mi piacerebbe avere una penna separata TM o essere in grado di impostare la penna come un'ellisse che il CTM converte in un cerchio, ma non vedo nulla del genere.

In mancanza di questo, penso di non dover dire a SVG del mio CTM e invece di trasformare le coordinate da solo, il che significa convertire primitive come rect ai loro equivalenti path.

+1

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

risposta

38

Edit:

C'è un attributo è possibile aggiungere al vostro rect per ottenere esattamente questo comportamento:

vector-effect="non-scaling-stroke" 

Questo era sbagliato:

Ciò funzionerà se si applica la trasformazione direttamente alla forma, non al gruppo in cui si trova. Naturalmente, se vuoi raggruppare più elementi e ridimensionarli tutti insieme, quell'approccio non funzionerà.

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

Questo può dipendere anche dal visualizzatore SVG; Inkscape rende il tuo file nel modo che preferisci (la larghezza del tratto non è influenzata dalla scala) ma Chrome lo mostra come hai mostrato.

+0

Interessante, ma penso che Chrome è corretta. La specifica SVG (1.1) dice che l'attributo transform viene applicato per primo e che è equivalente a xan

+0

Sì, penso che tu abbia ragione - e questo significa la mia risposta non funzionerà, perché l'ho provata in Inkscape e non in Chrome. –

+4

OK, ho trovato una risposta migliore [qui] (http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke). –

6

In postscript, la descrizione del percorso e l'esecuzione del tratto sono eventi separati, quindi è perfettamente possibile avere una "penna" TM separata.

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