有没有办法通过CSS从SVG背景图像中删除/禁用feFilter

Question

我有一个SVG文件(下面的内容(，里面有一个(fe(过滤器，可以创建一个"；"压花"；看我想要平的。如果我从<g>标签中删除filter=...，我就会得到我想要的。

有没有什么方法可以通过CSS做到这一点，而不必编辑SVG文件？

我可以通过直接在Chrome中打开SVG并添加一条规则来实现这一点：

g {filter: none !important;}

但我真正需要它的地方是在有background-image: url(file.svg)的div上。我尝试在div上添加filter: none，以及div svg g和div g，但这些都没有效果。

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<g filter="url(#filter0_ii_2525_53713)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 8C14 11.3137 11.3137 14 8.00004 14C4.6864 14 2.00012 11.3137 2.00012 8C2.00012 4.6863 4.6864 2 8.00004 2C11.3137 2 14 4.6863 14 8ZM4.45546 5.5443H10.1832C10.7709 5.5443 11.2719 6.04536 11.2657 6.63912V9.57103C11.2657 10.1586 10.7647 10.6597 10.1771 10.6597H6.02036C5.43286 10.6597 4.99986 10.1649 4.99986 9.57103V7.25144L4.25135 5.95251C4.09673 5.74226 4.22666 5.5443 4.45546 5.5443Z" fill="#1A73E8"/>
<path d="M10.1153 7.18344H6.16283C5.98954 7.18344 5.82252 7.07833 5.82252 6.91132C5.82252 6.74429 5.98968 6.63918 6.16283 6.63918H10.1153C10.2885 6.63918 10.4555 6.74429 10.4555 6.91132C10.4555 7.07833 10.2885 7.18344 10.1153 7.18344ZM10.1153 8.27214H6.16283C5.98954 8.27214 5.82252 8.16703 5.82252 8C5.82252 7.83297 5.98968 7.72786 6.16283 7.72786H10.1153C10.2885 7.72786 10.4555 7.83297 10.4555 8C10.4555 8.16703 10.2885 8.27214 10.1153 8.27214ZM9.02052 9.36696H6.15655C5.9834 9.36696 5.81639 9.26185 5.81639 9.09482C5.81639 8.9278 5.9834 8.82268 6.15655 8.82268H9.02052C9.19367 8.82268 9.36069 8.9278 9.36069 9.09482C9.36069 9.26185 9.19367 9.36696 9.02052 9.36696Z" fill="#1A73E8"/>
</g>
<defs>
<filter id="filter0_ii_2525_53713" x="2.00012" y="1.06667" width="11.9999" height="13.8667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.933333"/>
<feGaussianBlur stdDeviation="0.466667"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.24 0"/>
<feBlend mode="overlay" in2="shape" result="effect1_innerShadow_2525_53713"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-0.933333"/>
<feGaussianBlur stdDeviation="0.466667"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/>
<feBlend mode="multiply" in2="effect1_innerShadow_2525_53713" result="effect2_innerShadow_2525_53713"/>
</filter>
</defs>
</svg>```

Answer 1

g { filter: none !important; }

完美工作…！：

刚刚更改
width="16" height="16"到CSS

width  : 160px;
height : 160px;

为了使svg更加可视化。。。

svg {
width  : 160px;
height : 160px;
}
g {
filter : none !important;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
<g filter="url(#filter0_ii_2525_53713)" >
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 8C14 11.3137 11.3137 14 8.00004 14C4.6864 14 2.00012 11.3137 2.00012 8C2.00012 4.6863 4.6864 2 8.00004 2C11.3137 2 14 4.6863 14 8ZM4.45546 5.5443H10.1832C10.7709 5.5443 11.2719 6.04536 11.2657 6.63912V9.57103C11.2657 10.1586 10.7647 10.6597 10.1771 10.6597H6.02036C5.43286 10.6597 4.99986 10.1649 4.99986 9.57103V7.25144L4.25135 5.95251C4.09673 5.74226 4.22666 5.5443 4.45546 5.5443Z" fill="#1A73E8"/>
<path d="M10.1153 7.18344H6.16283C5.98954 7.18344 5.82252 7.07833 5.82252 6.91132C5.82252 6.74429 5.98968 6.63918 6.16283 6.63918H10.1153C10.2885 6.63918 10.4555 6.74429 10.4555 6.91132C10.4555 7.07833 10.2885 7.18344 10.1153 7.18344ZM10.1153 8.27214H6.16283C5.98954 8.27214 5.82252 8.16703 5.82252 8C5.82252 7.83297 5.98968 7.72786 6.16283 7.72786H10.1153C10.2885 7.72786 10.4555 7.83297 10.4555 8C10.4555 8.16703 10.2885 8.27214 10.1153 8.27214ZM9.02052 9.36696H6.15655C5.9834 9.36696 5.81639 9.26185 5.81639 9.09482C5.81639 8.9278 5.9834 8.82268 6.15655 8.82268H9.02052C9.19367 8.82268 9.36069 8.9278 9.36069 9.09482C9.36069 9.26185 9.19367 9.36696 9.02052 9.36696Z" fill="#1A73E8"/>
</g>
<defs>
<filter id="filter0_ii_2525_53713" x="2.00012" y="1.06667" width="11.9999" height="13.8667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.933333"/>
<feGaussianBlur stdDeviation="0.466667"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.24 0"/>
<feBlend mode="overlay" in2="shape" result="effect1_innerShadow_2525_53713"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-0.933333"/>
<feGaussianBlur stdDeviation="0.466667"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/>
<feBlend mode="multiply" in2="effect1_innerShadow_2525_53713" result="effect2_innerShadow_2525_53713"/>
</filter>
</defs>
</svg>