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滤镜

1 个答案: