124

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要素をスケーリングすると、軸が太くなることに興味はありません。

それで私はめちゃくちゃですか？

4

2 に答える 2

159

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

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

よりシャープな線が必要な場合は、アンチエイリアシング(または) を無効にしたり、配置をいじったりすることもできます。shape-rendering=optimizeSpeedshape-rendering=crispEdges

于 2009-08-20T07:49:17.973 に答える