124

我希望能够将 SVG 元素上的笔画宽度设置为“像素感知”，无论当前应用的缩放转换如何，它始终为 1px 宽。我知道这很可能是不可能的，因为 SVG 的重点是与像素无关。

上下文如下：

我有一个设置了 viewBox 和 preserveAspectRatio 属性的 SVG 元素。它看起来像这样

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

那我搞砸了吗？

4

2 回答 2

159

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

这将适用于支持 SVG Tiny 1.2 中的这些部分的浏览器，例如 Opera 10。回退包括编写一个小脚本来做同样的事情，基本上是反转 CTM 并将其应用于不应缩放的元素。

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

于 2009-08-20T07:49:17.973 回答
2

这是基于 Erik 的答案的更简洁的答案，可帮助您快速入门。

<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>

添加vector-effect="non-scaling-stroke"到 SVG 矩形使边框大小（或笔划大小）固定。

于 2022-01-03T22:49:45.460 回答