有什么方法可以通过CSS从SVG背景图像中删除/禁用feFilter吗？

Question

我有一个 SVG 文件（内容如下），其中有一个（fe）过滤器，可以创建“浮雕”外观。我想要它平坦。如果我从

filter=...

标签中删除

<g>

，我就会得到我想要的。

有没有办法通过 CSS 来做到这一点，而无需编辑 SVG 文件？

我可以通过直接在 Chrome 中打开 SVG 并添加规则来实现此目的：

g {filter: none !important;}

但我真正需要它的是在有

div

的

background-image: url(file.svg)

上。我尝试在 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>