Print

SVG在CSS背景平铺中的应用

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/195506.html

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

SVG在CSS背景平铺中的应用 1

这样就可以了

不过这样还没完，我们需要实现的反向圆角，所以这里需要用遮罩的方式，减去 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 背景平铺中的应用的详细内容，更多请关注其它相关文章！

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/