css - 在背景图像上淡出 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() 之间转换对另一个人的值(value)。对于 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>