CSS vector-effect与SVG stroke描边缩放

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8318
本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。

//zxx: 本文很多效果为实时SVG渲染，如果没有效果，访问原站即可。

一、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像素描边，下图为实时渲染效果：

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

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

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

这就是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图标表现为下图：

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

放在一起看效果更明显：

有专门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%;
}

则表现如下：

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

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

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

实时效果如下：

四、最后说点其他啥

在实际应用中，考虑到兼容性，建议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才能真正大放光彩，因为可以局部指定缩放方式。

（本篇完） 是不是学到了很多？可以分享到微信！
有话要说？点击这里。