Css 不同svg过滤器之间的转换-如何实现？

我确实将svg过滤器应用于我的jpg图像，通过悬停，我希望该过滤器再次关闭

过滤器看起来是这样的

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

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

---

谢谢

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

.container{
位置：相对位置；
宽度：300px；
高度：300px；
}
.集装箱img{
位置：绝对位置；
}
.过滤{
过滤器：url（#duotone）；
过渡：不透明度1s；
}
.过滤：悬停{
不透明度：0；
}

如果您想要转换，您必须通过在鼠标上设置SMIL动画来精确指定要更改的属性值，如果您设置了小提琴？

.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;
}