svg - 固定 SVG 中的笔画宽度

Question

我希望能够将 SVG 元素的笔划宽度设置为“像素感知”，无论当前应用的缩放转换如何，它始终为 1px 宽。我知道这很可能是不可能的，因为 SVG 的全部意义在于像素独立。

上下文如下:

我有一个 SVG 元素，它设置了 viewBox 和 preserveAspectRatio 属性。看起来像这样

<svg version="1.1" baseProfile="full"
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" >
</svg>

这意味着当我缩放该元素时，它内部的实际形状会相应地缩放(到目前为止还不错)。

如您所见，我已将 viewBox 设置为原点位于中心。我想在该元素内绘制一个 x 轴和一个 y 轴，我是这样做的:

<line x1="-1000" x2="1000" y1="0" y2="0" />

同样，这工作正常。不过，理想情况下，该轴始终只有 1 像素宽。当我缩放父 svg 元素时，我对轴变粗没有兴趣。

所以我搞砸了吗？

Answer 1

您可以使用 vector-effect 属性设置为 non-scaling-stroke，参见 the docs .另一种方法是使用 transform(ref) .

这将在支持 SVG Tiny 1.2 的那些部分的浏览器中工作，例如 Opera 10。回退包括编写一个小脚本来执行相同的操作，基本上反转 CTM 并将其应用于不应缩放的元素。

如果你想要更清晰的线条，你也可以disable antialiasing (shape-rendering=optimizeSpeed 或 shape-rendering=crispEdges)和/或调整定位。