如何从 css 中的这张 svg 照片中删除背景颜色？答案

【问题标题】：How to remove background color from this svg photo in css?如何从 css 中的这张 svg 照片中删除背景颜色？
【发布时间】：2023-01-03 14:04:02
【问题描述】：

我从开源中获得了这个 svg 模式，所以他们已经对其进行了编码，但我想在背景透明的地方对其进行自定义。

我一直在努力去除背景，我该怎么做？

Here is the image

这是来自开源的代码

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)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><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>");

【问题讨论】：

标签： html css reactjs svg

【解决方案1】：

寻找 svg 的 <rect> 部分。因为它的宽度和高度都是 100%，所以它很可能是背景。它有一个 fill 属性。将其更改为无。

<rect x='0' y='0' width='100%' height='100%' fill='none'/>

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)'><rect x='0' y='0' width='100%' height='100%' fill='none'/><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>");

【讨论】：