web-dev-qa-db-ja.com

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>

これは、その要素をスケーリングすると、その中の実際の形状がそれに応じてスケーリングされることを意味します（これまでのところ）.

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

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

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

だから私はめちゃくちゃですか？

svgvisualization
96
wxs

_vector-effect_に設定された_non-scaling-stroke_プロパティを使用できます。 ドキュメント を参照してください。別の方法は、 transform(ref) を使用することです。

これは、SVG Tiny 1.2のこれらの部分をサポートするブラウザで動作します。たとえば、Opera 10。それはスケーリングすべきではありません。

よりシャープな線が必要な場合は、 アンチエイリアスを無効にする （_shape-rendering=optimizeSpeed_または_shape-rendering=crispEdges_）および/またはポジショニングを試すこともできます。

118
Erik Dahlström