固定行程宽度在SVG中

Question

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

我搞砸了吗？

Answer 1

您可以使用vector-effect属性集来non-scaling-stroke查看文档.另一种方法是使用transform(ref).

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

如果您想要更清晰的线条,您还可以禁用抗锯齿(shape-rendering=optimizeSpeed或shape-rendering=crispEdges)和/或播放定位.

Answer 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 矩形可以使边框大小（或描边大小）固定。