在背景图像上淡出 SVG 滤镜

Question

我有一组带有背景图像的元素，这些元素上有一个 SVG 滤镜，使背景图像变灰。我需要它，以便当您将鼠标悬停在该元素上时，该 SVG 滤镜会淡化为透明，因此原始彩色图像会在没有滤镜的情况下显示。不幸的是，我似乎无法做到这一点。这是 CSS:

.badge__image {
    background-position: center;
    filter: url(/dist/filter.svg#duotone_bluetan);
}
.badge__image:hover {
    -webkit-transition : -webkit-filter 1000ms ease;
    transition: filter 1000ms ease;
    filter: url(/dist/filter.svg#clear);;
}

无论我怎么做，转换都是即时的。该图像必须是背景图像，我需要以某种方式完成此 SVG 过滤器转换。我不是非常精通 SVG 过滤或动画，而且我无法在网上找到一个这样做的例子。感谢任何帮助。

编辑

所以我将元素的副本粘贴到自身内部，并将其绝对定位并淡出内部元素。这是一种工作方式，它会淡入父背景，但是，一旦没有悬停，内部元素的不透明度会立即跳到 1，没有过渡。我在这里错过了什么？

.badge__image-filter {
    position: absolute;
    left: 0px;
    top: 0px;
    background-position: center;
    opacity: 1 !important;
    -webkit-transition: all 1000ms !important;
    transition: all 1000ms !important;
    filter: url(/dist/filter.svg#duotone_bluetan);
}
.badge__image-filter:hover {
    opacity: 0 !important;
    -webkit-transition: all 1000ms !important;
    transition: all 1000ms !important;
}

Answer 1

这里你要求你的 CSS 转换在一个 url() 值和另一个值之间转换。对于 CSS 引擎所知道的，这些只是字符串值，不可转换。

您可以通过多种方式实现自己的目标。

其中之一是复制您的元素，绝对放置两个元素并将每个过滤器应用于其自己的元素，然后转换两个元素的 opacity.

#clear,#filtered {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 1s;
}
#filtered {
  filter: url(#blurMe);
}
#clear {
  opacity: 0;
}
#cont {
  position: relative;
}
#cont:hover #filtered {
  opacity: 0;
}
#cont:hover #clear {
  opacity: 1;
}

<svg width="0" height="0" style="position:absolute;pointer-events:none">
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5">
    </feGaussianBlur>
  </filter>
</svg>
<div id="cont">
  <div id="filtered">Hello</div>
  <div id="clear">Hello</div>
</div>

根据您的实际过滤器，另一种方法是在 SVG 过滤器中使用 SMIL：

#circ {
  filter: url(#blurMe);
}

<svg width="0" height="0" style="position:absolute;pointer-events:none">
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5">
      <animate attributeType="XML" attributeName="stdDeviation" to="0"
        dur="1s" fill="freeze" begin="circ.mouseover"/>
      <animate attributeType="XML" attributeName="stdDeviation" to="5"
        dur="1s" fill="freeze" begin="circ.mouseout"/>
    </feGaussianBlur>
  </filter>
</svg>

<div id="circ">Hello</div>

但这似乎只适用于 Firefox 和 Safari...

而且我要注意，如果您能够将 SVG 滤镜转换为纯 CSS 滤镜（仅使用 CSS ），那么您可以通过它们的值进行转换，使用你必须保持两个状态之间所有过滤器的顺序的一个问题;也就是说，你不能从blur(5px)过渡到sepia(100%)，你必须从blur(5px) sepia(0)过渡到blur(0) sepia(100%)。

#circ {
  transition: filter 1s;
  color: red;
  filter: blur(5px) grayscale(100%);
}
#circ:hover {
  filter: blur(0px) grayscale(0);
}

<div id="circ">Hello</div>

在背景图像上淡出 SVG 滤镜

Fading out SVG filter on background image

css

svg

background-image

svg-filters