再次介绍一些你可能没用过的SVG小技巧。
再次介绍一些你可能没用过的SVG小技巧。
有时候会遇到一些完全相同的图形，如果能用上 CSS背景平铺，那就再合适不过了。举个例子，有这样一个按钮。
相比普通的按钮，多个左右两个小装饰，如果是你，会怎样实现呢？
假设这个小图标是a.svg，想了一下，应该有以下几种方式。
刚好用上::before和::after，设置相同的背景就行了，示意如下：
button::before,button::after{%20%20content:'';%20%20background:%20url(a.svg)}利用 CSS背景可以叠加的特性，设置两个背景就可以了，分别定位，示意如下：
button{%20%20background:%20url(a.svg)%2010px%20center%20no-repeat,url(a.svg)%20right%2010px%20top%20center%20no-repeat}这两种方式都是不错的方式，但是感觉还是有些浪费，毕竟把两个相同的图案重复写了两遍。
为啥不能直接用背景平铺呢？因为无法直接设置平铺的间隔，就像这样。
这时，如果能充分发挥SVG的特性，就可以仅仅使用平铺的方式来实现我们想要的效果了，一起看看吧~
就以上面的小图标为例，从 Figma中可以复制这段svg，如下：
<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>嗯，看着非常乱，没关系，我们不必关注里面的细节。
我们直接放在 html 中来展示这段svg，效果是这样的。
因为这段 svg有自带的尺寸，最后展示的就是16%20*%2016的大小。
如果我们手动改变这个svg的尺寸呢？为了方便观察，我们给svg添加一个边框，如下：
svg{ width:%20200px;%20%20height:%20100px;%20%20outline:%201px%20dashed;}你猜会是什么样的？
下面有%203%20个选项。
思考一分钟...
思考完成，答案是A，你猜对了吗？
为什么会这样呢？有点类似于object-fit:contain的效果。其实这是viewBox造成的，viewBox会按照尺寸等比放大从而铺满整个svg。
有关 viewBox的更多介绍，可以参考张鑫旭老师的这篇文章：理解SVG%20viewport,viewBox,preserveAspectRatio缩放。
如果去除viewBox，svg内部该是什么样就是什么样，也就是仍然是16*16的大小。
<!--去除viewBox属性--><svg%20width="16"%20height="16"%20fill="none"%20xmlns="http://www.w3.org/2000/svg">%20%20...</svg>结果如下：
也就是说，在去除viewBox之后，无论svg尺寸是多少，里面的图标都不会变化。
看似好像没什么用？
其实用处可大了，可以让背景以我们想要的方式平铺，那就来看接下来的应用。
现在来简单实现文章开头所示的按钮效果。html很简单，就一个标签。
<button>召唤卡牌</button>然后简单装饰一下，绘制圆角和背景。
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;}效果如下：
接下来，我们要用上前面的那段svg，先去除viewBox属性，为了能够通过背景尺寸控制svg大小，我们可以将svg的尺寸改成100%。
示意如下：
<svg%20width="100%"%20height="100%"%20fill="none"%20xmlns="http://www.w3.org/2000/svg">%20%20...</svg>然后将这段svg转换成css内联格式，推荐用张鑫旭老师的在线转换工具。
SVG在线压缩合并工具。
可以得到这样一段。
--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背景放到按钮中。
button{%20%20background:%20var(--icon)%20#FF2A2A;}效果如下:
很明显，此时这个svg图标背景默认尺寸是充满整个容器的，也就是100%%20*%20100%。如果希望右边也出现平铺一个图标，可以减小背景尺寸，比如。
button{%20%20background:%20var(--icon)%20#FF2A2A;%20%20background-size:%20calc(100%%20-%2048px)}效果如下：
然后改变水平位置。
button{%20%20background:%20var(--icon)%20#FF2A2A;%20%20background-size:%20calc(100%%20-%2048px);%20%20background-position:%2016px;}效果如下：
左右已经出现图标了，现在只需要垂直居中就可以了，这个也很好实现，设置尺寸为图标本身大小，然后改变背景位置就行了。
button{%20%20background:%20var(--icon)%20#FF2A2A;%20%20background-size:%20calc(100%%20-%2048px)%2016px;%20%20background-position:%2016px%20center;}效果如下：
垂直方向也平铺了，所以还需要改变一下平铺方式，仅限水平方向。
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;}这样就仅仅使用平铺完成了想要的效果！
是不是有些不可思议？下面是一个示意图，紫色圆圈代表图标，紫色边框代表svg尺寸，也就是背景尺寸，设置为100%%20-%2036px后，水平方向的平铺就可以显示两个圆圈了，然后适当移动背景位置，就可以看到左右两边的图标了。
当然这种实现也是完全是自适应的，无论什么尺寸都可以完美适配。
完整代码可以查看以下链接：
里面有提到用径向渐变的方式来绘制内凹圆角，但是渐变一直都是一个非常难学的技巧，语法非常多，一般同学表示接受不了。
这里就采用 SVG来代替径向渐变的方式来实现这样的优惠券效果。
首先，我们用设计软件随便画个圆，这里以Figma为例，然后复制出SVG。
其实就是这样一段代码。
<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>非常简单吧。
然后去除viewBox，并且设置宽高为100%，这是为了让SVG画布尺寸撑满整个容器。
<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内联格式。
--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 背景中。
div{%20%20background:%20var(--icon);}目前效果是这样的。
我们需要将这个圆分割到4个角落上，可以直接用背景平移的方式。
div{%20%20background:%20var(--icon);%20%20background-position:%20-20px%20-20px;}这样就可以了，演示如下：
不过这样还没完，我们需要实现的反向圆角，所以这里需要用遮罩的方式，减去 4 个角落。
回到这里，我们只需要一个完整的背景，减去刚才的圆角就可以了，具体实现如下：
.coupon{ background: linear-gradient(red,orange); -webkit-mask:linear-gradient(red,red), var(--icon); -webkit-mask-position: -20px -20px; -webkit-mask-composite: xor;}效果如下，其实和前面几乎一致。
是不是没有用到径向渐变？
完整代码可以查看以下链接：
有时候径向渐变还是有很多局限的，复杂的图形绘制不了或者成本很高。而 SVG就没有这样的限制了，如果能有一定的自适应特性，相信可以更方便的解决问题。
比如这样一个带圆角的自适应聚焦框，可能在大屏可视化比较常见，如下（CSS表示无能为力
本文链接：http://www.28at.com/showinfo-26-88726-0.html不一样的SVG！SVG在CSS背景平铺中的应用
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 我们一起聊聊结构体及其方法的使用法门
下一篇： Hive SQL底层执行过程详细剖析
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
