CSS vector-effect与SVG stroke描边缩放

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

内容简介: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描边缩放》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

奇点临近

奇点临近

Ray Kurzweil / 董振华、李庆成 / 机械工业出版社 / 2011-10 / 69.00元

人工智能作为21世纪科技发展的最新成就,深刻揭示了科技发展为人类社会带来的巨大影响。本书结合求解智能问题的数据结构以及实现的算法,把人工智能的应用程序应用于实际环境中,并从社会和哲学、心理学以及神经生理学角度对人工智能进行了独特的讨论。本书提供了一个崭新的视角,展示了以人工智能为代表的科技现象作为一种“奇点”思潮,揭示了其在世界范围内所产生的广泛影响。本书全书分为以下几大部分:第一部分人工智能,第......一起来看看 《奇点临近》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具