CSS vector-effect与SVG stroke描边缩放

栏目: CSS · 发布时间: 5年前

内容简介:byzhangxinxu from本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。//zxx: 本文很多效果为实时SVG渲染,如果没有效果,访问原站即可。

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8318

本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。

//zxx: 本文很多效果为实时SVG渲染,如果没有效果,访问原站即可。 https://www.zhangxinxu.com/wordpress/?p=8318

一、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本身尺寸变大而变大。

放在一起看效果更明显:

CSS vector-effect与SVG stroke描边缩放

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

CSS vector-effect与SVG stroke描边缩放

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

本文地址: https://www.zhangxinxu.com/wordpress/?p=8318

(本篇完)


以上所述就是小编给大家介绍的《CSS vector-effect与SVG stroke描边缩放》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UML参考手册

UML参考手册

兰博 / UML China / 机械工业出版社 / 2005-8 / 75.00元

《UML参考手册》在第1版的基础上进行了重大更新和扩展。UML的创建者James Rumbaugh、Ivar Jacobson和Grady Booch,清晰完整地讲述了UML的所有概念,包括对序列图、活动模型、状态机、组件、类和组件的内部结构以及特性描述的主要修订。手册式结构不仅有助于读者对UML的概念进行规范化的学习与理解,更为广大程序开发人员、系统用户和工程技术人员提供了方便快捷的查询方式。无......一起来看看 《UML参考手册》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器