首页 文章

固定SVG中的笔划宽度

提问于
浏览 次
82

我希望能够将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元素时，我对轴越来越不感兴趣 .

我搞砸了吗？

svg visualization

1 回答

  • 104

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

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

    如果你想要更清晰的线条，你也可以disable antialiasing（ shape-rendering=optimizeSpeed 或 shape-rendering=crispEdges ）和/或玩定位 .

    回复于

相关问题