SVG 中的固定行程宽度

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

背景如下:

我有一个 SVG 元素，它设置了 viewBox 和 presveAspectratio 属性

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

我完蛋了吗？

58429

小开

最佳答案

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

这将工作在支持 SVG Tiny 1.2的浏览器中，例如 Opera 10。后备方法包括编写一个小脚本来执行相同的操作，基本上是反转 CTM 并将其应用到不应该伸缩的元素上。

如果你想更清晰的线条，你也可以禁用反走样(shape-rendering=optimizeSpeed或 shape-rendering=crispEdges)和/或发挥的定位。

<div style="background: blue; width: 100%; height: 130px;"> <svg xml:id="root" viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="none"> <rect xml:id="r" vector-effect="non-scaling-stroke" x="0" y="0" width="100" height="100" fill="none" stroke="#88CE02" stroke-linecap="square" stroke-width="10" stroke-miterlimit="30"/> </svg> </div>