SVG中的固定笔划宽度

我希望能够将SVG元素的笔触宽度设置为“像素感知”，无论当前应用了什么缩放转换，该宽度始终为1px。我知道这很可能是不可能的，因为SVG的全部要点是像素无关的。

上下文如下：

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

<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元素时，我对轴变得更胖没有兴趣。

那我搞砸了吗？

您可以使用vector-effect设置为的属性non-scaling-stroke，请参阅文档。另一种方法是使用transform(ref)。

这将在支持SVG Tiny 1.2中那些部分的浏览器中起作用，例如Opera10。回退包括编写一个小的脚本来执行此操作，基本上是反转CTM并将其应用于不应该扩展的元素上。

如果您想要更清晰的线条，还可以禁用抗锯齿（shape-rendering=optimizeSpeed或shape-rendering=crispEdges）和/或使用定位功能。