固定行程宽度在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" />

再次，这很好。但理想情况下，此轴总是只有1px宽。当我缩放父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）和/或玩定位。