[解決済み] SVGのストローク幅を固定化

質問

私は、SVG 要素のストローク幅を "ピクセル認識" に設定できるようにしたいと思っています。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>

これは、その要素を拡大縮小すると、その中の実際の図形もそれに応じて拡大縮小することを意味します（ここまでは良いことです）。

見てわかるように、原点が中央になるようにビューボックスを設定しました。その要素の中にX軸とY軸を描きたいので、このようにします。

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

これも問題なく動作します。しかし、理想的には、この軸は常に幅が 1px だけであるべきです。親 SVG 要素を拡大縮小したときに軸が太くなることには関心がありません。

それで、私は失敗したのでしょうか?

どうすればいいのでしょうか？

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

これは、SVG Tiny 1.2 からそれらの部分をサポートするブラウザ、例えば Opera 10 で動作します。フォールバックには、同じことを行う小さなスクリプトを書くこと、基本的に CTM を反転させ、拡大縮小すべきでない要素にそれを適用することが含まれます。

よりシャープな線が必要な場合、次の方法もあります。 アンチエイリアスを無効にする ( shape-rendering=optimizeSpeed または shape-rendering=crispEdges など)または位置決めで遊んでみてください。