43

SVG (および Canvas、Quartz、Postscript など) では、変換マトリックスはパス座標と線幅の両方に影響します。線幅が変わらないように調整する方法はありますか？つまり、次の例では、X と Y でスケールが異なるため、正方形が長方形になり、これで問題ありませんが、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>

長方形幅拡大ペン

多くの場合に役立つことがわかりますが、オプトアウトする方法はありますか? 別のペン TM を用意するか、CTM が円に変換する楕円にペンを設定できるようにしたいと思いますが、そのようなものは見当たりません。

それが欠けているので、SVG に CTM を伝えるのではなく、自分で座標を変換する必要があると思います。つまり、プリミティブrectをpath同等のものに変換するということです。

4

2 に答える 2

53

編集：

この動作を正確に取得するために、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はファイルを希望どおりにレンダリングしますが（ストローク幅は縮尺の影響を受けません）、Chromeは表示されているとおりにファイルをレンダリングします。

于 2012-04-27T20:24:04.730 に答える
7

Postscript では、パスの記述とストロークの実行は別個のイベントであるため、別個の「ペン」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
于 2012-04-30T02:59:27.353 に答える