如何使用CSS去除SVG背景色，实现透明背景？

你的SVG图案背景无法透明，是因为图案定义内的白色填充矩形在起作用，按以下方法修改即可：

• 定位到代码里的这一行：

  <rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/>
  

  有两种处理方式可选：
  1. 直接删除整个<rect>标签，彻底移除背景填充；
  2. 将fill属性值改为transparent或hsla(0,0%,100%,0)，把白色背景设为完全透明。

以下是删除矩形后的完整代码示例：

background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='20' patternTransform='scale(1) rotate(0)'><path d='M-4.798 13.573C-3.149 12.533-1.446 11.306 0 10c2.812-2.758 6.18-4.974 10-5 4.183.336 7.193 2.456 10 5 2.86 2.687 6.216 4.952 10 5 4.185-.315 7.35-2.48 10-5 1.452-1.386 3.107-3.085 4.793-4.176'  stroke-width='3.5' stroke='hsla(0, 0%, 92%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");

内容的提问来源于stack exchange，提问作者rheina tamara