绘制一条在图像拉伸时不会变粗的线条

Question

在图像拉伸时,SVG中是否有一种方法可以绘制一条保持细线的线？

我正在使用SVG图像作为CSS背景,如下所示:

<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> 

(对角线).我通过一个矩形元素拉伸这个图像,当元素更大时,线条变粗,但我需要一条始终很细的线条.

可能？像闪光灯中的"细"线一样.

Answer 1

在实现SVG 1.2T的浏览器中,您可以使用非缩放中风 Opera和Webkit支持此功能,就像15版本的Firefox一样.

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

<!-- via CSS -->
<style>
  line { vector-effect:non-scaling-stroke }
</style>
<line … />