css - 画一条在图像拉伸时不会变粗的线

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 支持此功能，Firefox 15 版也支持此功能。

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

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