9

現在、svg でグラフィックスを描画しようとしています。用紙サイズは A4、1 ロジック ユニットは 1mm を表します。そこで、ビューポートを 297mmx210mm、ビューボックスを 297x210 に設定しました。今の問題は、私が描くグラフのストローク幅が 1 ピクセルではなくなったことです。例えば、

<!DOCTYPE html>
<html>
<body>
<svg width="297mm" height="210mm" viewBox='0 0 297 210' style="border: 1px solid #cccccc;">
    <path stroke="black" fill="none" stroke-width='1' d='M 10 10 L 60 10'/>
    <path stroke="black" fill="none" stroke-width='1px' d='M 10 30 L 60 30'/>
    <path stroke="black" fill="none" d='M 10 50 L 60 50'/>
</svg>
</body>
</html>

上記の 3 行は、ストローク幅を「1px」に設定しても、まったく同じ線幅です。そのような設定で1ピクセル幅の線を描くことはまだ可能ですか?

4

1 に答える 1

24

これを試して：

<path stroke="black" fill="none" stroke-width='1px' d='M 10 30 L 60 30' vector-effect="non-scaling-stroke"/>

vector-effect="non-scaling-stroke"は SVG 1.2 の Tiny 機能で、スケーリングや単位変換が有効であっても、ストローク幅を指定したとおりに強制します。FF と Chrome (おそらくその他) ではサポートされていますが、残念ながら IE ではサポートされていません (今のところ)。それを受け入れることができれば、それが問題の最も簡単な解決策です。

于 2013-07-11T15:22:59.240 に答える