Question

我对我的jpg图像应用svg-filter，并且通过悬停我希望该过滤器再次关闭。

所以过滤器看起来像那样

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

两个过滤器确实很好用，并且悬停也可以做一些事情但是在悬停时根本没有过渡。我做错了什么或不是可能的？

谢谢！

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

如果您需要在两个不同的滤镜之间进行切换，只需将另一个滤镜应用到后部元素。

不同的svg过滤器之间的过渡 - 如何？

1 个答案: