21

画像が引き伸ばされたときに細く保つ線をSVGに描画する方法はありますか?

次のような CSS 背景として SVG 画像を使用しています。

<svg ... preserveAspectRatio="none" viewBox="0 0 15 15">
  <line x1="0" y1="15" x2="15" y2="0"
        color="#000" stroke="#333" stroke-width="1" />
</svg>

(対角線)。この画像を長方形の要素に引き伸ばしています。要素が大きくなると線が太くなりますが、常に細い線が必要です。

可能？フラッシュの「細い」線のようなもの。

4

1 に答える 1

25

SVG 1.2T を実装するブラウザーでは 、バージョン 15 以降の Firefox と同様に、Opera と Webkit がこれをサポートする非スケーリング ストロークを持つことができます。

<!-- via property -->
<line … vector-effect="non-scaling-stroke" />

<!-- via CSS -->
<style>
  line { vector-effect:non-scaling-stroke }
</style>
<line … />
于 2012-04-15T09:16:49.373 に答える