SVG中的固定笔划宽度

本文介绍了SVG中的固定笔划宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我希望能够将SVG元素的笔触宽度设置为像素感知"，无论应用当前的缩放转换如何，该宽度始终为1px.我知道这很可能是不可能的，因为SVG的全部要点是像素无关的.

I would like to be able to set the stroke-width on an SVG element to be "pixel-aware", that is always be 1px wide regardless of the current scaling transformations applied. I am aware that this may well be impossible, since the whole point of SVG is to be pixel independent.

上下文如下:

我有一个SVG元素，其viewBox和prepareAspectRatio属性已设置.看起来像这样

I have an SVG element with its viewBox and preserveAspectRatio attributes set. It looks something like this

<svg version="1.1" baseProfile="full" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet" xmlns="www.w3/2000/svg" > </svg>

这意味着当我缩放该元素时，其内部的实际形状也会相应地缩放(到目前为止很好).

This means that when I scale that element, the actual shapes inside it scale accordingly (so far so good).

如您所见，我已经设置了viewBox，以使原点位于中心.我想在该元素内绘制一个x轴和y轴，因此，我这样做:

As you can see, I have set up the viewBox so that the origin is in the center. I would like to draw an x- and a y-axis within that element, which I do thus:

<line x1="-1000" x2="1000" y1="0" y2="0" />

同样，这很好.不过，理想情况下，此轴始终始终只有1px宽.当缩放父级svg元素时，我对轴变得更胖没有兴趣.

Again, this works fine. Ideally, though, this axis would always be only 1px wide. I have no interest in the axes getting fatter when i scale the parent svg element.

那我搞砸了吗?

推荐答案

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

You can use the vector-effect property set to non-scaling-stroke, see the docs. Another way is to use transform(ref).

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

That will work in browsers that support those parts from SVG Tiny 1.2, for example Opera 10. The fallback includes writing a small script to do the same, basically inverting the CTM and applying it on the elements that shouldn't scale.

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

If you want sharper lines you can also disable antialiasing (shape-rendering=optimizeSpeed or shape-rendering=crispEdges) and/or play with the positioning.