SVG在CSS背景平铺中的应用

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

这样就可以了

不过这样还没完，我们需要实现的反向圆角，所以这里需要用遮罩的方式，减去 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>

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

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

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