XboxYan 前端 2024-05-17

SVG在CSS背景平铺中的应用

AI 概述

1.伪元素2. 多重背景一、SVG 的自适应和 viewBox二、自适应尺寸与背景平铺三、有时候可替代径向渐变五、总结一下本文将为大家介绍一些你可能没用过的SVG小技巧。有时候会遇到一些完全相同的图形，如果能用上 CSS背景平铺，那就再合适不过了。举个例子，有这样一个按钮：相比普通的按钮，多...

文章目录隐藏

1.伪元素
2. 多重背景
一、SVG 的自适应和 viewBox
二、自适应尺寸与背景平铺
三、有时候可替代径向渐变
五、总结一下

本文将为大家介绍一些你可能没用过的SVG小技巧。

有时候会遇到一些完全相同的图形，如果能用上 CSS背景平铺，那就再合适不过了。举个例子，有这样一个按钮：

相比普通的按钮，多个左右两个小装饰，如果是你，会怎样实现呢？

假设这个小图标是a.svg，想了一下，应该有以下几种方式

1.伪元素

刚好用上::before和::after，设置相同的背景就行了，代码如下：

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

2. 多重背景

利用 CSS背景可以叠加的特性，设置两个背景就可以了，分别定位，代码如下：

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

这两种方式都是不错的方式，但是感觉还是有些浪费，毕竟把两个相同的图案重复写了两遍。

为啥不能直接用背景平铺呢？因为无法直接设置平铺的间隔，就像这样：

这时，如果能充分发挥SVG的特性，就可以仅仅使用平铺的方式来实现我们想要的效果了，一起看看吧~

一、SVG 的自适应和 viewBox

就以上面的小图标为例，从 Figma中可以复制这段svg，如下：

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M15.021 8.028L15 8.027c-.262-.26-.876-.747-2.008-.701.13-.314.027-1.204-.676-1.227.179.574-.803.974-1.361 1.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 0 0 0-.316-.29.663.663 0 0 0-.21-.22 3.071 3.071 0 0 0-.109-.157l.002-.21.43.004.003-.277-.43-.004.002-.436c.283-.127.478-.667.644-1.152.19-.555.606-1.53 1.18-1.341-.013-.704-.902-.822-1.216-.695.063-1.135-.417-1.754-.67-2.02V.977L8.036.99 8.028.977l-.001.02c-.26.263-.747.877-.701 2.009-.314-.13-1.204-.027-1.228.676.574-.179.974.803 1.155 1.362.157.484.345 1.025.622 1.159l-.003.437-.43-.002v.277l.427.003-.002.25c-.022.028-.046.058-.069.091a.643.643 0 0 0-.29.317.664.664 0 0 0-.222.21 3.07 3.07 0 0 0-.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 1.216-1.135-.063-1.754.417-2.02.67H.977l.012.012-.012.009.02.001c.263.26.877.747 2.009.702-.13.314-.027 1.203.676 1.227-.179-.574.803-.974 1.362-1.155.484-.157 1.024-.345 1.159-.622l.437.003-.002.43h.277l.003-.427.25.002c.028.022.058.046.091.069a.643.643 0 0 0 .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 1.15-.19.556-.606 1.532-1.18 1.342.013.705.902.822 1.216.696-.063 1.134.417 1.753.67 2.02v.022l.012-.011c.004.003.006.007.009.012l.001-.021c.26-.263.747-.877.702-2.009.314.13 1.203.027 1.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 0 0 0 .29-.317.664.664 0 0 0 .222-.21c.06-.04.114-.077.156-.108l.21.002-.004.43.276.002.004-.43.437.002c.127.283.666.478 1.15.644.556.19 1.532.606 1.342 1.18.705-.013.823-.902.696-1.216 1.134.063 1.753-.417 2.02-.67h.022a1.093 1.093 0 0 1-.011-.012c.003-.004.007-.006.012-.009h-.002z" fill="#000"/>
</svg>

然后，直接放在 html 中来展示这段svg，效果是这样的：

因为这段 svg有自带的尺寸，最后展示的就是16 * 16的大小。

如果我们手动改变这个svg的尺寸呢？为了方便观察，我们给svg添加一个边框，如下：

svg{
  width: 200px;
  height: 100px;
  outline: 1px dashed;
}

你猜会是什么样的？

下面有 3 个选项：

思考一分钟…

思考完成，答案是A，你猜对了吗？

为什么会这样呢？有点类似于object-fit:contain的效果。其实这是viewBox造成的，viewBox会按照尺寸等比放大从而铺满整个svg。

如果去除viewBox，svg内部该是什么样就是什么样，也就是仍然是16*16的大小：

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

效果如下：

也就是说，在去除viewBox之后，无论svg尺寸是多少，里面的图标都不会变化。

看似好像没什么用？🤔

其实用处可大了，可以让背景以我们想要的方式平铺，那就来看接下来的应用。

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

现在来简单实现文章开头所示的按钮效果。html很简单，就一个标签：

<button>召唤卡牌</button>

然后简单装饰一下，绘制圆角和背景：

button{
  border: 0;
  outline: 0;
  padding: 8px 36px;
  font-size: 12px;
  line-height: 16px;
  border-radius: 30px;
  color: #FFEFDB;
  background: #FF2A2A;
}

效果如下：

接下来，我们要用上前面的那段svg，先去除viewBox属性，为了能够通过背景尺寸控制svg大小，我们可以将svg的尺寸改成100%。

代码如下：

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

然后将这段svg转换成css内联格式。免费在线转换工具网上一大堆，自行搜索。

转换后，可以得到这样一段：

--icon: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.021 8.028L15 8.027c-.262-.26-.876-.747-2.008-.701.13-.314.027-1.204-.676-1.227.179.574-.803.974-1.361 1.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 0 0 0-.316-.29.663.663 0 0 0-.21-.22 3.071 3.071 0 0 0-.109-.157l.002-.21.43.004.003-.277-.43-.004.002-.436c.283-.127.478-.667.644-1.152.19-.555.606-1.53 1.18-1.341-.013-.704-.902-.822-1.216-.695.063-1.135-.417-1.754-.67-2.02V.977L8.036.99 8.028.977l-.001.02c-.26.263-.747.877-.701 2.009-.314-.13-1.204-.027-1.228.676.574-.179.974.803 1.155 1.362.157.484.345 1.025.622 1.159l-.003.437-.43-.002v.277l.427.003-.002.25c-.022.028-.046.058-.069.091a.643.643 0 0 0-.29.317.664.664 0 0 0-.222.21 3.07 3.07 0 0 0-.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 1.216-1.135-.063-1.754.417-2.02.67H.977l.012.012-.012.009.02.001c.263.26.877.747 2.009.702-.13.314-.027 1.203.676 1.227-.179-.574.803-.974 1.362-1.155.484-.157 1.024-.345 1.159-.622l.437.003-.002.43h.277l.003-.427.25.002c.028.022.058.046.091.069a.643.643 0 0 0 .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 1.15-.19.556-.606 1.532-1.18 1.342.013.705.902.822 1.216.696-.063 1.134.417 1.753.67 2.02v.022l.012-.011c.004.003.006.007.009.012l.001-.021c.26-.263.747-.877.702-2.009.314.13 1.203.027 1.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 0 0 0 .29-.317.664.664 0 0 0 .222-.21c.06-.04.114-.077.156-.108l.21.002-.004.43.276.002.004-.43.437.002c.127.283.666.478 1.15.644.556.19 1.532.606 1.342 1.18.705-.013.823-.902.696-1.216 1.134.063 1.753-.417 2.02-.67h.022a1.093 1.093 0 0 1-.011-.012c.003-.004.007-.006.012-.009h-.002z' fill='%23FFEFDB'/%3E%3C/svg%3E")

接着，将这段svg背景放到按钮中：

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

效果如下：

很明显，此时这个svg图标背景默认尺寸是充满整个容器的，也就是100% * 100%。如果希望右边也出现平铺一个图标，可以减小背景尺寸，比如：

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

效果如下：

然后改变水平位置：

button{
  background: var(--icon) #FF2A2A;
  background-size: calc(100% - 48px);
  background-position: 16px;
}

效果如下：

左右已经出现图标了，现在只需要垂直居中就可以了，这个也很好实现，设置尺寸为图标本身大小，然后改变背景位置就行了：

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

效果如下：

垂直方向也平铺了，所以还需要改变一下平铺方式，仅限水平方向。

代码如下：

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

这样就仅仅使用平铺完成了想要的效果！

是不是有些不可思议？下面是一个示意图，紫色圆圈代表图标，紫色边框代表svg尺寸，也就是背景尺寸，设置为100% - 36px后，水平方向的平铺就可以显示两个圆圈了，然后适当移动背景位置，就可以看到左右两边的图标了。

当然这种实现也是完全是自适应的，无论什么尺寸都可以完美适配：

完整代码可以查看点击链接

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

里面有提到用径向渐变的方式来绘制内凹圆角，但是渐变一直都是一个非常难学的技巧，语法非常多，一般同学表示接受不了。

这里就采用 SVG来代替径向渐变的方式来实现这样的优惠券效果：

首先，我们用设计软件随便画个圆，这里以Figma为例，然后复制出SVG

其实就是这样一段代码：

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

然后去除viewBox，并且设置宽高为100%，这是为了让SVG画布尺寸撑满整个容器：

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

接着转换成CSS内联格式：

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

然后用在 CSS 背景中：

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

目前效果是这样的：

这样就可以了

不过这样还没完，我们需要实现的反向圆角，所以这里需要用遮罩的方式，减去 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小技巧，仅仅需要小小的改动，就能让SVG自适应背景平铺，如下：

<!--去除 viewBox 属性，并设置宽高 100%-->
<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

你学到了吗？下面总结一下实现要点

SVG默认会根据viewBox填充整个画布，有点类似于object-fit:contain的效果
去除viewBox后，无论svg尺寸是多少，里面的内容大小都不会变化
利用这个特性，可以通过设置背景尺寸的方式，让背景以我们想要的方式平铺
有时候可替代径向渐变，毕竟 SVG 比渐变还是容易很多
复杂的图形渐变绘制不了或者成本很高，SVG 还能更灵活

以上就是 SVG 在 CSS 背景平铺中的应用的详细内容，更多请关注码云笔记其它相关文章！

以上关于SVG在CSS背景平铺中的应用的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » SVG在CSS背景平铺中的应用