淡出背景图像上的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 <filterFuncs>），那么你可以转换它们的值，你需要保持所有的顺序。两个州之间的过滤器;也就是说，你不能从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>