SVGの固定ストローク幅

SVG要素のストローク幅を「ピクセル対応」に設定できるようにしたいと思います。これは、現在適用されているスケーリング変換に関係なく、常に1px幅です。SVGの全体のポイントはピクセルに依存しないため、これは不可能であることは承知しています。

コンテキストは次のとおりです。

私は、viewBoxとpreserveAspectRatio属性が設定されたSVG要素を持っています。こんな感じ

<svg version="1.1" baseProfile="full"
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" >
</svg>

これは、その要素を拡大縮小すると、要素内の実際の形状がそれに応じて拡大縮小されることを意味します（これまでのところ、これで十分です）。

ご覧のとおり、原点が中央になるようにviewBoxを設定しました。その要素内にx軸とy軸を描画したいので、次のようにします。

<line x1="-1000" x2="1000" y1="0" y2="0" />

繰り返しますが、これは問題なく機能します。ただし、理想的には、この軸の幅は常に1ピクセルのみです。親のsvg要素をスケーリングしたときに軸が太くなることに関心がありません。

だから私はねじ込まれていますか？

vector-effectプロパティをに設定して使用できます。ドキュメントをnon-scaling-stroke参照してください。もう1つの方法は、を使用することです。transform(ref)

これは、SVG Tiny 1.2のこれらのパーツをサポートするブラウザー、たとえばOpera 10で機能します。フォールバックには、同じことを行う小さなスクリプトを記述し、基本的にCTMを反転させて、拡大縮小してはならない要素に適用します。

よりシャープなラインが必要な場合は、アンチエイリアス（shape-rendering=optimizeSpeedまたはshape-rendering=crispEdges）を無効にしたり、配置を変更したりすることもできます。