CSS vector-effect与SVG stroke描边缩放

这篇文章发布于 2018年12月24日,星期一,00:04,归类于 CSS相关, SVG相关。 阅读 4530 次, 今日 1 次 6 条评论

 

//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才能真正大放光彩,因为可以局部指定缩放方式。

(本篇完)

分享到:
×


发表评论(目前6 条评论)

  1. 微信SVG图文动画排版说道:

    请问在微信公众平台发布的SVG,里面的animateTransform 做的动画全部被默认删除了 但是点击事件还有

  2. 说道:

    请问一下,stroke-width=”1px” 但是有的地方为什么显示2px?

  3. 前端码农说道:

    链接底部的波浪线svg更吸引我,个人建议波浪线的stroke设为currentColor,张大大可否试试链接的底部横线也用svg?:hover时,直线变型为波浪线,然后波浪线再移动。