2012-04-27 5 views
31

SVG(およびCanvas、Quartz、Postscript、...)では、変換行列はパス座標と線幅の両方に影響します。線幅に影響を与えないように調整する方法はありますか?つまり、次の例では、XとYの縮尺が異なるため、四角形は矩形になりますが、これはOKですが、2つの辺で線が広くなります。ストローク幅を現在の変換行列に適用する方法

<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

私はそれが多くの場合に有用であろう見ることができますが、それをオプトアウトする方法はありますか?私は別のペンTMを持っているか、CTMが円に変換する楕円形にペンを設定することができると思いますが、そのようなものは何も表示されません。

私はCTGに関してSVGに指示せず、代わりにrectのようなプリミティブをpath相当に変換することを意味する座標を自分自身に変換する必要があると思います。

+1

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

答えて

38

編集:

あなたはまさにこの動作を得るためにあなたのRECTに追加できる属性があります:

vector-effect="non-scaling-stroke" 

これは間違っていた:

ます場合、これは動作しますそれが入っているグループではなく、シェイプに直接トランスフォームを適用します。もちろん、複数のアイテムをグループ化してそれらをすべて一緒にスケールしたい場合、そのアプローチは機能しません。

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

これはSVGビューアによっても異なる場合があります。 Inkscapeはファイルを望むようにレンダリングします(尺度の影響を受けないストロークの幅)が、表示されているとおりにレンダリングされます。

+0

興味深いが、私はクロームが正しいことだと思います。 SVG(1.1)仕様では、変換属性が最初に適用され、と同等です。 xan

+0

はい、あなたは正しいと思います。私の答えはうまくいきません。なぜなら、ChromeではなくInkscapeでテストしたからです。 –

+4

OK、より良い回答が見つかりました[ここ](http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke)。 –

6

ポストスクリプトでは、パスの記述とストロークの実行は別々のイベントであるため、別々の「ペン」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