css - 绘制一条在图像拉伸(stretch)时不会变粗的线

Question

在 SVG 中有没有一种方法可以在拉伸(stretch)图像时绘制一条保持细的线？

我使用 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> 

(对 Angular 线)。我通过一个矩形元素拉伸(stretch)此图像，当元素更大时，线条会变粗，但我需要一条始终很细的线条。

可能吗？类似于 Flash 中的“细”线。

Answer 1

在实现 SVG 1.2T 的浏览器中，你可以有一个 non-scaling stroke Opera 和 Webkit 以及版本 15 的 Firefox 都支持这一点。

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

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