不同 svg 过滤器之间的转换 - 如何？答案

【问题标题】：Transition between different svg-filters - how to?不同 svg 过滤器之间的转换 - 如何？
【发布时间】：2017-01-14 06:14:22
【问题描述】：

我确实对我的 jpg 图像应用了一个 svg 过滤器，并且通过悬停我希望该过滤器再次关闭。

所以过滤器看起来像这样

<svg version="1.1" width="0" height="0" class="filter-rot">
    <filter id="duotone" color-interpolation-filters="sRGB">
        <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix>
        <feComponentTransfer color-interpolation-filters="sRGB">
            <feFuncR type="table" tableValues="0 0.098"></feFuncR>
            <feFuncG type="table" tableValues="0 0.114"></feFuncG>
            <feFuncB type="table" tableValues="0 0.722"></feFuncB>
            <feFuncA type="table" tableValues="1 1"></feFuncA>
        </feComponentTransfer>
    </filter>
</svg>

然后scss就是这样的：

.sw_projekte figure img{
    width:100%;
    height:auto;
    transition: 0.2s;
    -webkit-filter: url(#duotone);
    filter:  url(#duotone); /* For Firefox pre-35 */
    filter:  url(#duotone);
    transition: 0.5s;
}

.sw_projekte figure img:hover{
    filter:  none;
}

两个过滤器都非常好用，悬停也有作用，但悬停时根本没有过渡。我做错了什么还是不可能？

谢谢！

【问题讨论】：

如果您想要过渡，您必须通过 SMIL 在鼠标悬停时为其设置动画来准确指定要更改的属性值
你能设置一个小提琴吗？

标签： css svg svg-filters

【解决方案1】：

实现您想要做的最简单的方法是将您的元素的两个副本直接放在另一个之上。将过滤器应用于顶部的一个，然后在悬停时将其淡出（以显示下面的另一个）。

.container {
  position: relative;
  width: 300px;
  height: 300px;
}

.container img {
  position: absolute;
}

.filtered {
  filter: url(#duotone);
  transition: opacity 1s;
}

.filtered:hover {
  opacity: 0;
}

<svg version="1.1" width="0" height="0" class="filter-rot">
    <filter id="duotone" color-interpolation-filters="sRGB">
        <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix>
    </filter>
</svg>

<div class="container">
  <img src="http://lorempixel.com/output/people-q-c-300-300-4.jpg" width="300" height="300"/>
  <img src="http://lorempixel.com/output/people-q-c-300-300-4.jpg" width="300" height="300" class="filtered"/>
</div>

如果您需要在两个不同的过滤器之间进行转换，只需将另一个过滤器应用于后元素即可。

【讨论】：