代码之家 › 专栏 › 技术社区 › wxs

SVG中的固定笔划宽度

visualization svg

wxs · 技术社区 · 15 年前

我希望能够将SVG元素的笔画宽度设置为“像素感知”,即无论应用的当前缩放转换如何,笔画宽度始终为1px。我知道这很可能是不可能的,因为SVG的整个点是独立于像素的。

上下文如下:

我有一个带有viewbox和preservaspectratio属性集的svg元素。看起来像这样

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

这意味着,当我缩放该元素时,它内部的实际形状会相应地缩放(目前为止还不错)。

如您所见,我已经设置了视图框,使原点位于中心。我想在这个元素中画一个x轴和一个y轴,我这样做:

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

再说一次,这很管用。理想情况下,尽管如此,这个轴总是只有1px宽。当我缩放父SVG元素时,我对轴变得更胖没有兴趣。

那我完蛋了吗?

1 回复 | 直到 9 年前

107

Zach Saucier 9 年前

你可以使用 vector-effect 属性设置为 non-scaling-stroke 见 the docs . 另一种方法是 transform(ref) .

这将在支持SVG Tiny 1.2的那些部分的浏览器中起作用,例如Opera 10。回退包括编写一个小脚本来完成相同的操作,基本上反转CTM,并将其应用于不应进行缩放的元素。

如果你想要更清晰的线条,你也可以 disable antialiasing ( shape-rendering=optimizeSpeed 或 shape-rendering=crispEdges )和/或玩定位。

推荐文章

WebDragon · 是否可以通过在html<SVG>标签中设置特定的data-*属性来更改SVG图像中显示的文本内容?

6 月前

Paul Lovell · 为什么JavaScript中生成的SVG元素的大小与HTML中直接定义的SVG元素不同?

6 月前

man · CSS-如何具有或模拟仅适用于内部的半径边框

7 月前

McLaren · 增加笔划宽度属性后,图标将被裁剪

7 月前

docker compose · React Native中椭圆或圆角矩形视图周围的进度边界

11 月前

Lucas Martins Soares · 如何覆盖SVG图像的默认颜色?[副本]

11 月前

user2171796 · 两个M。。。Z序列相遇,背景颜色显现

12 月前

MarcelausZell · 调整svg的大小会导致额外的高度

1 年前

RaiuProGram · Svg evenoodd=“true”不起作用(用路径在Svg上打孔)

1 年前

compx · 当尝试使用Selenium选择svg时,NoSuchElements存在

1 年前