当前位置:首页 > 科技  > 软件

不一样的SVG!SVG在CSS背景平铺中的应用

来源: 责编: 时间:2024-05-16 17:44:46 108观看
导读再次介绍一些你可能没用过的SVG小技巧。再次介绍一些你可能没用过的SVG小技巧。有时候会遇到一些完全相同的图形,如果能用上 CSS背景平铺,那就再合适不过了。举个例子,有这样一个按钮。相比普通的按钮,多个左右两个小装饰

再次介绍一些你可能没用过的SVG小技巧。m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

再次介绍一些你可能没用过的SVG小技巧。m5u28资讯网——每日最新资讯28at.com

有时候会遇到一些完全相同的图形,如果能用上 CSS背景平铺,那就再合适不过了。举个例子,有这样一个按钮。m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

相比普通的按钮,多个左右两个小装饰,如果是你,会怎样实现呢?m5u28资讯网——每日最新资讯28at.com

假设这个小图标是a.svg,想了一下,应该有以下几种方式。m5u28资讯网——每日最新资讯28at.com

1.伪元素

刚好用上::before和::after,设置相同的背景就行了,示意如下:m5u28资讯网——每日最新资讯28at.com

button::before,button::after{%20%20content:'';%20%20background:%20url(a.svg)}

2.%20多重背景

利用 CSS背景可以叠加的特性,设置两个背景就可以了,分别定位,示意如下:m5u28资讯网——每日最新资讯28at.com

button{%20%20background:%20url(a.svg)%2010px%20center%20no-repeat,url(a.svg)%20right%2010px%20top%20center%20no-repeat}

这两种方式都是不错的方式,但是感觉还是有些浪费,毕竟把两个相同的图案重复写了两遍。m5u28资讯网——每日最新资讯28at.com

为啥不能直接用背景平铺呢?因为无法直接设置平铺的间隔,就像这样。m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

这时,如果能充分发挥SVG的特性,就可以仅仅使用平铺的方式来实现我们想要的效果了,一起看看吧~m5u28资讯网——每日最新资讯28at.com

一、SVG的自适应和viewBox

就以上面的小图标为例,从 Figma中可以复制这段svg,如下:m5u28资讯网——每日最新资讯28at.com

<svg%20width="16"%20height="16"%20viewBox="0%200%2016%2016"%20fill="none"%20xmlns="http://www.w3.org/2000/svg">%20%20%20%20<path%20d="M15.021%208.028L15%208.027c-.262-.26-.876-.747-2.008-.701.13-.314.027-1.204-.676-1.227.179.574-.803.974-1.361%201.155-.484.156-1.025.344-1.16.622l-.437-.003.002-.43-.276-.001-.004.428-.25-.002c-.028-.022-.058-.047-.091-.07a.643.643%200%200%200-.316-.29.663.663%200%200%200-.21-.22%203.071%203.071%200%200%200-.109-.157l.002-.21.43.004.003-.277-.43-.004.002-.436c.283-.127.478-.667.644-1.152.19-.555.606-1.53%201.18-1.341-.013-.704-.902-.822-1.216-.695.063-1.135-.417-1.754-.67-2.02V.977L8.036.99%208.028.977l-.001.02c-.26.263-.747.877-.701%202.009-.314-.13-1.204-.027-1.228.676.574-.179.974.803%201.155%201.362.157.484.345%201.025.622%201.159l-.003.437-.43-.002v.277l.427.003-.002.25c-.022.028-.046.058-.069.091a.643.643%200%200%200-.29.317.664.664%200%200%200-.222.21%203.07%203.07%200%200%200-.156.108l-.21-.002.004-.43-.276-.002-.004.43-.436-.002c-.127-.283-.667-.478-1.152-.644-.555-.19-1.53-.606-1.341-1.18-.704.013-.822.902-.695%201.216-1.135-.063-1.754.417-2.02.67H.977l.012.012-.012.009.02.001c.263.26.877.747%202.009.702-.13.314-.027%201.203.676%201.227-.179-.574.803-.974%201.362-1.155.484-.157%201.024-.345%201.159-.622l.437.003-.002.43h.277l.003-.427.25.002c.028.022.058.046.091.069a.643.643%200%200%200%20.317.29c.058.101.135.172.21.222.04.06.077.114.108.156l-.002.21-.43-.004-.002.276.43.004-.002.437c-.283.127-.478.666-.644%201.15-.19.556-.606%201.532-1.18%201.342.013.705.902.822%201.216.696-.063%201.134.417%201.753.67%202.02v.022l.012-.011c.004.003.006.007.009.012l.001-.021c.26-.263.747-.877.702-2.009.314.13%201.203.027%201.227-.676-.574.179-.974-.803-1.155-1.362-.157-.483-.345-1.024-.622-1.159l.003-.437.43.002v-.277l-.427-.003.002-.25c.022-.028.046-.058.069-.091a.643.643%200%200%200%20.29-.317.664.664%200%200%200%20.222-.21c.06-.04.114-.077.156-.108l.21.002-.004.43.276.002.004-.43.437.002c.127.283.666.478%201.15.644.556.19%201.532.606%201.342%201.18.705-.013.823-.902.696-1.216%201.134.063%201.753-.417%202.02-.67h.022a1.093%201.093%200%200%201-.011-.012c.003-.004.007-.006.012-.009h-.002z"%20fill="#000"/></svg>

嗯,看着非常乱,没关系,我们不必关注里面的细节。m5u28资讯网——每日最新资讯28at.com

我们直接放在 html 中来展示这段svg,效果是这样的。m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

因为这段 svg有自带的尺寸,最后展示的就是16%20*%2016的大小。m5u28资讯网——每日最新资讯28at.com

如果我们手动改变这个svg的尺寸呢?为了方便观察,我们给svg添加一个边框,如下:m5u28资讯网——每日最新资讯28at.com

svg{ width:%20200px;%20%20height:%20100px;%20%20outline:%201px%20dashed;}

你猜会是什么样的?m5u28资讯网——每日最新资讯28at.com

下面有%203%20个选项。m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

思考一分钟...m5u28资讯网——每日最新资讯28at.com

思考完成,答案是A,你猜对了吗?m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

为什么会这样呢?有点类似于object-fit:contain的效果。其实这是viewBox造成的,viewBox会按照尺寸等比放大从而铺满整个svg。m5u28资讯网——每日最新资讯28at.com

有关 viewBox的更多介绍,可以参考张鑫旭老师的这篇文章:理解SVG%20viewport,viewBox,preserveAspectRatio缩放。m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

如果去除viewBox,svg内部该是什么样就是什么样,也就是仍然是16*16的大小。m5u28资讯网——每日最新资讯28at.com

<!--去除viewBox属性--><svg%20width="16"%20height="16"%20fill="none"%20xmlns="http://www.w3.org/2000/svg">%20%20...</svg>

结果如下:m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

也就是说,在去除viewBox之后,无论svg尺寸是多少,里面的图标都不会变化。m5u28资讯网——每日最新资讯28at.com

看似好像没什么用?m5u28资讯网——每日最新资讯28at.com

其实用处可大了,可以让背景以我们想要的方式平铺,那就来看接下来的应用。m5u28资讯网——每日最新资讯28at.com

二、自适应尺寸与背景平铺

现在来简单实现文章开头所示的按钮效果。html很简单,就一个标签。m5u28资讯网——每日最新资讯28at.com

<button>召唤卡牌</button>

然后简单装饰一下,绘制圆角和背景。m5u28资讯网——每日最新资讯28at.com

button{%20%20border:%200;%20%20outline:%200;%20%20padding:%208px%2036px;%20%20font-size:%2012px;%20%20line-height:%2016px;%20%20border-radius:%2030px;%20%20color:%20#FFEFDB;%20%20background:%20#FF2A2A;}

效果如下:m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

接下来,我们要用上前面的那段svg,先去除viewBox属性,为了能够通过背景尺寸控制svg大小,我们可以将svg的尺寸改成100%。m5u28资讯网——每日最新资讯28at.com

示意如下:m5u28资讯网——每日最新资讯28at.com

<svg%20width="100%"%20height="100%"%20fill="none"%20xmlns="http://www.w3.org/2000/svg">%20%20...</svg>

然后将这段svg转换成css内联格式,推荐用张鑫旭老师的在线转换工具。m5u28资讯网——每日最新资讯28at.com

SVG在线压缩合并工具。m5u28资讯网——每日最新资讯28at.com

可以得到这样一段。m5u28资讯网——每日最新资讯28at.com

--icon:%20url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M15.021%208.028L15%208.027c-.262-.26-.876-.747-2.008-.701.13-.314.027-1.204-.676-1.227.179.574-.803.974-1.361%201.155-.484.156-1.025.344-1.16.622l-.437-.003.002-.43-.276-.001-.004.428-.25-.002c-.028-.022-.058-.047-.091-.07a.643.643%200%200%200-.316-.29.663.663%200%200%200-.21-.22%203.071%203.071%200%200%200-.109-.157l.002-.21.43.004.003-.277-.43-.004.002-.436c.283-.127.478-.667.644-1.152.19-.555.606-1.53%201.18-1.341-.013-.704-.902-.822-1.216-.695.063-1.135-.417-1.754-.67-2.02V.977L8.036.99%208.028.977l-.001.02c-.26.263-.747.877-.701%202.009-.314-.13-1.204-.027-1.228.676.574-.179.974.803%201.155%201.362.157.484.345%201.025.622%201.159l-.003.437-.43-.002v.277l.427.003-.002.25c-.022.028-.046.058-.069.091a.643.643%200%200%200-.29.317.664.664%200%200%200-.222.21%203.07%203.07%200%200%200-.156.108l-.21-.002.004-.43-.276-.002-.004.43-.436-.002c-.127-.283-.667-.478-1.152-.644-.555-.19-1.53-.606-1.341-1.18-.704.013-.822.902-.695%201.216-1.135-.063-1.754.417-2.02.67H.977l.012.012-.012.009.02.001c.263.26.877.747%202.009.702-.13.314-.027%201.203.676%201.227-.179-.574.803-.974%201.362-1.155.484-.157%201.024-.345%201.159-.622l.437.003-.002.43h.277l.003-.427.25.002c.028.022.058.046.091.069a.643.643%200%200%200%20.317.29c.058.101.135.172.21.222.04.06.077.114.108.156l-.002.21-.43-.004-.002.276.43.004-.002.437c-.283.127-.478.666-.644%201.15-.19.556-.606%201.532-1.18%201.342.013.705.902.822%201.216.696-.063%201.134.417%201.753.67%202.02v.022l.012-.011c.004.003.006.007.009.012l.001-.021c.26-.263.747-.877.702-2.009.314.13%201.203.027%201.227-.676-.574.179-.974-.803-1.155-1.362-.157-.483-.345-1.024-.622-1.159l.003-.437.43.002v-.277l-.427-.003.002-.25c.022-.028.046-.058.069-.091a.643.643%200%200%200%20.29-.317.664.664%200%200%200%20.222-.21c.06-.04.114-.077.156-.108l.21.002-.004.43.276.002.004-.43.437.002c.127.283.666.478%201.15.644.556.19%201.532.606%201.342%201.18.705-.013.823-.902.696-1.216%201.134.063%201.753-.417%202.02-.67h.022a1.093%201.093%200%200%201-.011-.012c.003-.004.007-.006.012-.009h-.002z'%20fill='%23FFEFDB'/%3E%3C/svg%3E")

接着,将这段svg背景放到按钮中。m5u28资讯网——每日最新资讯28at.com

button{%20%20background:%20var(--icon)%20#FF2A2A;}

效果如下:m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

很明显,此时这个svg图标背景默认尺寸是充满整个容器的,也就是100%%20*%20100%。如果希望右边也出现平铺一个图标,可以减小背景尺寸,比如。m5u28资讯网——每日最新资讯28at.com

button{%20%20background:%20var(--icon)%20#FF2A2A;%20%20background-size:%20calc(100%%20-%2048px)}

效果如下:m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

然后改变水平位置。m5u28资讯网——每日最新资讯28at.com

button{%20%20background:%20var(--icon)%20#FF2A2A;%20%20background-size:%20calc(100%%20-%2048px);%20%20background-position:%2016px;}

效果如下:m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

左右已经出现图标了,现在只需要垂直居中就可以了,这个也很好实现,设置尺寸为图标本身大小,然后改变背景位置就行了。m5u28资讯网——每日最新资讯28at.com

button{%20%20background:%20var(--icon)%20#FF2A2A;%20%20background-size:%20calc(100%%20-%2048px)%2016px;%20%20background-position:%2016px%20center;}

效果如下:m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

垂直方向也平铺了,所以还需要改变一下平铺方式,仅限水平方向。m5u28资讯网——每日最新资讯28at.com

button{%20%20background:%20var(--icon)%20#FF2A2A;%20%20background-size:%20calc(100%%20-%2048px)%2016px;%20%20background-position:%2016px%20center;%20%20background-repeat:%20repeat-x;}

这样就仅仅使用平铺完成了想要的效果!m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

是不是有些不可思议?下面是一个示意图,紫色圆圈代表图标,紫色边框代表svg尺寸,也就是背景尺寸,设置为100%%20-%2036px后,水平方向的平铺就可以显示两个圆圈了,然后适当移动背景位置,就可以看到左右两边的图标了。m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

当然这种实现也是完全是自适应的,无论什么尺寸都可以完美适配。m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

完整代码可以查看以下链接:m5u28资讯网——每日最新资讯28at.com

CSS%20&%20SVG%20repeat%20button%20(juejin.cn)[1]CSS%20&%20SVG%20repeat%20button%20(codepen.io)[2]

三、有时候可替代径向渐变

里面有提到用径向渐变的方式来绘制内凹圆角,但是渐变一直都是一个非常难学的技巧,语法非常多,一般同学表示接受不了。m5u28资讯网——每日最新资讯28at.com

这里就采用 SVG来代替径向渐变的方式来实现这样的优惠券效果。m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

首先,我们用设计软件随便画个圆,这里以Figma为例,然后复制出SVG。m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

其实就是这样一段代码。m5u28资讯网——每日最新资讯28at.com

<svg%20width="40"%20height="40"%20viewBox="0%200%2040%2040"%20fill="none"%20xmlns="http://www.w3.org/2000/svg"><circle%20cx="20"%20cy="20"%20r="20"%20fill="#FF336F"/></svg>

非常简单吧。m5u28资讯网——每日最新资讯28at.com

然后去除viewBox,并且设置宽高为100%,这是为了让SVG画布尺寸撑满整个容器。m5u28资讯网——每日最新资讯28at.com

<svg%20width="100%"%20height="100%"%20viewBox="0%200%2040%2040"%20fill="none"%20xmlns="http://www.w3.org/2000/svg"><circle%20cx="20"%20cy="20"%20r="20"%20fill="#FF336F"/></svg>

接着转换成CSS内联格式。m5u28资讯网——每日最新资讯28at.com

--icon:%20url("data:image/svg+xml,%3Csvg%20width='100%'%20height='100%'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle%20cx='20'%20cy='20'%20r='20'%20fill='%23FF336F'/%3E%3C/svg%3E")

然后用在 CSS 背景中。m5u28资讯网——每日最新资讯28at.com

div{%20%20background:%20var(--icon);}

目前效果是这样的。m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

我们需要将这个圆分割到4个角落上,可以直接用背景平移的方式。m5u28资讯网——每日最新资讯28at.com

div{%20%20background:%20var(--icon);%20%20background-position:%20-20px%20-20px;}

这样就可以了,演示如下:m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

不过这样还没完,我们需要实现的反向圆角,所以这里需要用遮罩的方式,减去 4 个角落。m5u28资讯网——每日最新资讯28at.com

回到这里,我们只需要一个完整的背景,减去刚才的圆角就可以了,具体实现如下:m5u28资讯网——每日最新资讯28at.com

.coupon{  background: linear-gradient(red,orange);  -webkit-mask:linear-gradient(red,red), var(--icon);  -webkit-mask-position: -20px -20px;  -webkit-mask-composite: xor;}

效果如下,其实和前面几乎一致。m5u28资讯网——每日最新资讯28at.com

m5u28资讯网——每日最新资讯28at.com

是不是没有用到径向渐变?m5u28资讯网——每日最新资讯28at.com

完整代码可以查看以下链接:m5u28资讯网——每日最新资讯28at.com

  • CSS & SVG coupon (juejin.cn)[3]
  • CSS & SVG coupon (codepen.io)[4]

四、SVG还可以更灵活

有时候径向渐变还是有很多局限的,复杂的图形绘制不了或者成本很高。而 SVG就没有这样的限制了,如果能有一定的自适应特性,相信可以更方便的解决问题。m5u28资讯网——每日最新资讯28at.com

比如这样一个带圆角的自适应聚焦框,可能在大屏可视化比较常见,如下(CSS表示无能为力

本文链接:http://www.28at.com/showinfo-26-88726-0.html不一样的SVG!SVG在CSS背景平铺中的应用

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: 我们一起聊聊结构体及其方法的使用法门

下一篇: Hive SQL底层执行过程详细剖析

标签:
  • 热门焦点
  • K60至尊版刚预热 一加Ace2 Pro正面硬刚

    K60至尊版刚预热 一加Ace2 Pro正面硬刚

    Redmi这边刚如火如荼的宣传了K60 Ultra的各种技术和硬件配置,作为竞品的一加也坐不住了。一加中国区总裁李杰发布了两条微博,表示在自家的一加Ace2上早就已经采用了和PixelWo
  • 6月iOS设备好评榜:第一蝉联榜首近一年

    6月iOS设备好评榜:第一蝉联榜首近一年

    作为安兔兔各种榜单里变化最小的那个,2023年6月的iOS好评榜和上个月相比没有任何排名上的变化,仅仅是部分设备好评率的下降,长年累月的用户评价和逐渐退出市场的老款机器让这
  • 轿车从天而降电动车主被撞身亡 超速抢道所致:现场视频让网友吵翻

    轿车从天而降电动车主被撞身亡 超速抢道所致:现场视频让网友吵翻

    近日,上海青浦区法院判决轿车从天而降电动车主被撞身亡案,轿车车主被判有期徒刑一年。案件显示当时男子驾驶轿车在上海某路段行驶,前车忽然转弯提速超车,
  • 学习JavaScript的10个理由...

    学习JavaScript的10个理由...

    作者 | Simplilearn编译 | 王瑞平当你决心学习一门语言的时候,很难选择到底应该学习哪一门,常用的语言有Python、Java、JavaScript、C/CPP、PHP、Swift、C#、Ruby、Objective-
  • 让我们一起聊聊文件的操作

    让我们一起聊聊文件的操作

    文件【1】文件是什么?文件是保存数据的地方,是数据源的一种,比如大家经常使用的word文档、txt文件、excel文件、jpg文件...都是文件。文件最主要的作用就是保存数据,它既可以保
  • 每天一道面试题-CPU伪共享

    每天一道面试题-CPU伪共享

    前言:了不起:又到了每天一到面试题的时候了!学弟,最近学习的怎么样啊 了不起学弟:最近学习的还不错,每天都在学习,每天都在进步! 了不起:那你最近学习的什么呢? 了不起学弟:最近在学习C
  • OPPO、vivo、小米等国内厂商Q2在印度智能手机市场份额依旧高达55%

    OPPO、vivo、小米等国内厂商Q2在印度智能手机市场份额依旧高达55%

    7月20日消息,据外媒报道,研究机构的报告显示,在全球智能手机出货量同比仍在下滑的大背景下,印度这一有潜力的市场也未能幸免,出货量同比也有下滑,多家厂
  • iQOO Neo8 Pro评测:旗舰双芯加持 最强性能游戏旗舰

    iQOO Neo8 Pro评测:旗舰双芯加持 最强性能游戏旗舰

    【Techweb评测】去年10月,iQOO推出了一款Neo7手机,该机搭载了联发科天玑9000+,配备独显芯片Pro+,带来了同价位段最佳的游戏体验,一经上市便受到了诸多用
  • 电博会与软博会实现

    电博会与软博会实现"线下+云端"的双线融合

    在本次“电博会”与“软博会”双展会利好条件的加持下,既可以发挥展会拉动人流、信息流、资金流实现快速交互流动的作用,继而推动区域经济良性发展;又可以聚
Top