热搜: fiddler git ip 代理
历史搜索

SVG在CSS背景平铺中的应用

游客2024-07-28 14:33:01
目录文章目录
  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 背景平铺中的应用的详细内容,更多请关注其它相关文章!

标签:CSS