☰

SVGのストローク幅を修正する 質問する

tag-icon • tag-icon svg visualization
SVGのストローク幅を修正する 質問する

SVG 要素のストロークの幅を「ピクセル対応」に設定できるようにしたいのですが、これは、現在適用されているスケーリング変換に関係なく、常に 1 ピクセルの幅になるようにします。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 要素を拡大縮小したときに軸が太くなることには興味がありません。

それで私はダメなの？

ベストアンサー1

vector-effectに設定されたプロパティを使用できますnon-scaling-stroke。ドキュメントもう一つの方法はtransform(ref)。

これは、Opera 10 など、SVG Tiny 1.2 のこれらの部分をサポートするブラウザーで機能します。フォールバックには、基本的に CTM を反転し、拡大縮小しない要素に適用する、同じことを実行する小さなスクリプトの作成が含まれます。

よりシャープなラインが欲しい場合は、アンチエイリアシングを無効にする（shape-rendering=optimizeSpeedまたはshape-rendering=crispEdges）および/または配置を調整します。

おすすめ記事