CSS vector-effect与SVG stroke描边缩放

转载 zhangxinxu  2018-12-30 13:49  阅读 536 views 次

一、SVG stroke描边默认会缩放

如下CSS和SVG代码:

.icon {
width: 50px; height: 50px;
fill: none;
stroke-width: 2px;
stroke: #2486ff;
stroke-linecap: round;
}

SVG如下:

<svg class="icon" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20"/>
<path d="M25 15 L 25 35"/>
<path d="M15 25 L 35 25"/>
</svg>

此时,SVG图标表现为2像素描边,下图为实时渲染效果:

SVG stroke描边默认会缩放

此时,如果我们把尺寸加倍,变成100 * 100,如下:

<svg class="icon" style="width:100px; height:100px;" viewBox="0 0 50 50">...</svg>

则可以看到小图标的stroke描边宽度也加倍了,现在约4px大小:

SVG stroke描边默认会缩放

这就是SVG stroke描边的默认特性,描边会跟随尺寸缩放。

但是,有些时候,我们希望图片无论尺寸多大,描边的大小都是设定的宽度值,这样,就算高宽拉伸比例不一致,图标表现也良好。

此时,就可以使用vector-effect属性。

二、vector-effect属性简介

vector-effect是一个SVG属性,现代浏览器中,SVG属性已经和CSS几乎打通了,可以共用,例如fill, stroke等属性。

因此,我们也是可以在CSS代码中使用vector-effect控制SVG的描边缩放特性的。

语法

vector-effect: default | non-scaling-stroke | inherit | <uri>

我们实际使用就一个,就是non-scaling-stroke值。

例如:

circle, path {
vector-effect: non-scaling-stroke;
}

此时的100*100图标表现为下图:

vector-effect

可以看到,描边依旧是2px,并未因SVG本身尺寸变大而变大。

放在一起看效果更明显:

vector-effect属性简介

有专门demo演示,您可以狠狠地点击这里:vector-effect SVG描边不缩放demo

三、实际web开发用到不多

跟我的一番研究与测试,基本上可以下定论,我们实际web开发用到vector-effect机会并不多,更多的是本身和SVG打交道的图形场合。

对于传统web开发,我们使用SVG更多的是小图标,和部分简单的矢量装饰图。以下3点注定与vector-effect无缘:

  1. 实际开发,我们是希望小图标跟随屏幕尺寸缩放的;
  2. SVG小图标几乎都采用fill填充模式,及时是描边小图标,此时vector-effect属性无用武之地;
  3. SVG小图标主流使用<use>元素,和fill, stroke属性不同,vector-effect无法被继承。因此,同一个图标无法表现为不同的描边缩放特性。

如:

<svg><use xlink:href="#icon"></use></svg>
<svg style="vector-effect: non-scaling-stroke;"><use xlink:href="#icon"></use></svg>

上面2个小图标表现一定是一样的,在外面的svg或者use元素上设置vector-effect都是无效的。

vector-effect

比较适合的场景

假设我们的加号图标外面不是一个圆,而是一个宽度弹性的矩形,如下:

<svg class="icon rect" viewBox="4 4 42 42" preserveAspectRatio="none">
<rect x="5" y="5" width="40" height="40"/>
<path d="M25 15 L 25 35"/>
<path d="M15 25 L 35 25"/>
</svg>

此时,我们设置图标宽度为百分比宽度,例如:

.rect {
width: 50%;
}

则表现如下:

实际web开发用到不多

可以看到,垂直方向边框好粗,水平方向依然2像素,导致比例异常。

此时,设置下面CSS可以让线条比例正常:

rect, path {
vector-effect: non-scaling-stroke;
}

实时效果如下:

实际web开发用到不多

四、最后说点其他啥

在实际应用中,考虑到兼容性,建议vector-effect还是作为HTML属性应用在SVG代码上,例如:

<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" vector-effect="non-scaling-stroke"/>
<path d="M25 15 L 25 35" vector-effect="non-scaling-stroke"/>
<path d="M15 25 L 35 25" vector-effect="non-scaling-stroke"/>
</svg>

相关文档

写之前很兴奋,以为发现了一个很有意思的属性,以后在某些场合可大放光彩。写完之后淡如止水,发现适用场景没有预想的多。等什么时候浏览器支持<symbol>和<view>的preserveAspectRatio属性时候,vector-effect才能真正大放光彩,因为可以局部指定缩放方式。

本文地址:https://www.ggbiji.com/vector-effect.html
温馨提示:文章内容系作者个人观点,不代表国哥笔记对观点赞同或支持。
版权声明:本文为转载文章,来源于 zhangxinxu ,版权归原作者所有!

发表评论


表情