2012-04-27 18 views
31

W SVG (i płótnie, kwarcu, postscriptum, ...) macierz transformacji wpływa zarówno na współrzędne ścieżki, jak i na szerokość linii. Czy istnieje sposób regulacji, aby nie wpłynęła na szerokość linii? Oznacza to, że w poniższym przykładzie skala jest różna dla X i Y, co powoduje, że kwadrat jest prostokącie, co jest w porządku, ale powoduje również, że linie są szersze po dwóch stronach.W jaki sposób uczynić szerokość obrysu odporną na bieżącą macierz przekształceń?

<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

widzę, że byłoby przydatne w wielu przypadkach, ale czy jest jakiś sposób, aby zrezygnować z tego? Przypuszczam, że chciałbym mieć osobne pióro TM lub móc ustawić pióro jako elipsę, którą CTM przekształca w okrąg, ale nie widzę czegoś takiego.

Jeśli tego nie zrobię, nie muszę mówić SVG o moim WRT i zamiast tego samemu przekształcać współrzędne, co oznacza przekształcanie elementów pierwotnych, takich jak rect, w ich odpowiedniki o wartości path.

+1

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

Odpowiedz

38

Edit:

Jest atrybutem możesz dodać do swojej rect, aby uzyskać dokładnie to zachowanie:

vector-effect="non-scaling-stroke" 

To było źle:

to będzie działać, jeśli zastosuj transformację bezpośrednio do kształtu, a nie do grupy, w której się znajduje. Oczywiście, jeśli chcesz zgrupować kilka elementów i skalować je wszystkie razem, to podejście nie zadziała.

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

Może to również zależeć od przeglądarki SVG; Inkscape renderuje twój plik w pożądany sposób (szerokość obrysu nie zależy od skali), ale Chrome renderuje go tak, jak pokazałeś.

+0

Ciekawe, ale myślę, że Chrome jest prawidłowe. Specyfikacja SVG (1.1) mówi, że atrybut transformacji jest stosowany jako pierwszy, a jest równoważny xan

+0

Tak, myślę, że masz rację - a to oznacza moja odpowiedź nie zadziała, ponieważ przetestowałem ją w Inkscape, a nie w Chrome. –

+4

OK, znalazłem lepszą odpowiedź [tutaj] (http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke). –

6

W postscript, opisywanie ścieżki i wykonywanie obrysu są osobnymi zdarzeniami, więc możliwe jest posiadanie oddzielnej "długopisu" 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 
Powiązane problemy