修复了SVG中的行程宽度

我希望能够将SVG元素的笔划宽度设置为“像素感知”，即不pipe当前的缩放转换如何，总是为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 ，请参阅文档 。 另一种方法是使用transform(ref) 。

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

如果你想要更清晰的线条，你也可以禁用反锯齿 （ shape-rendering=optimizeSpeed或shape-rendering=crispEdges ）和/或使用定位进行播放。