画一条在图像拉伸时不会变粗的线答案

【问题标题】：Draw a line that doesn't get thicker when image stretches画一条在图像拉伸时不会变粗的线
【发布时间】：2012-04-26 23:09:04
【问题描述】：

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

（对角线）。我正在通过一个矩形元素拉伸这张图片，当元素更大时，线条会变得更粗，但我需要一条始终很细的线条。

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

【问题讨论】：

你以什么方式扩展它 - 使用桌面应用程序或某种库？ stroke-width改造后可以不重置吗？
我将它用作网页中的 CSS 背景。无法重置笔画宽度：/
我根本不知道这个库，但我想你可以用 RaphaelJS 做到这一点。可能值得一试？

标签： css svg

【解决方案1】：

在实现 SVG 1.2T 的浏览器中，您可以使用 non-scaling stroke Opera 和 Webkit 支持此功能，Firefox 15 版也支持此功能。

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

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

【讨论】：

IE9 不支持非缩放笔画。不知道IE10是否支持这个功能。