4

私のアプリケーションは、SVGで描画される一連のグラフポイントを生成します。ポイント値は、常に水平方向および垂直方向に0〜1000の範囲です。描画が行われる長方形のサイズは変更される場合があります。

これは、200X85の長方形にグラフを描画するためのSVG要素です。

<svg width="200" height="85" viewBox="0 0 1000 1000" preserveAspectRatio="none">
    <polyline  stroke="#e69800"
               stroke-width="2px"
               fill="none"
               points="0,1000 100,900 200,800
                       300,700 400,600 500,500
                       600 400 700,300 800,200900,100 1000,0"/>
</svg>

設定viewBox="0 0 1000 1000"するとグラフが適切なサイズに縮小されます。問題は、これによって線の幅も同じ比率で縮小されるため、線が表示されなくなることです。

SVGは属性の「px」を無視しているようですstroke-width="2px"。

線の幅（ストローク幅）を絶対ピクセルサイズで指定する方法はありますか？

4

1 に答える 1

9

この属性vector-effect="non-scaling-stroke"を使用して、行が残りの行と一緒にスケーリングされないようにすることができます。

参照：http ：//www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke

この変更の結果として生じる視覚効果は、ストローク幅が要素の変換（不均一なスケーリングとせん断変換を含む）とズームレベルに依存しないことです。

ただし、SVG1.1は非スケーリングストロークをサポートしていないようです。そのため、最終的な結果はレンダリングエンジンによって異なる場合があります。

于 2012-10-25T09:46:43.380 に答える