Переход между различными svg-фильтрами - как?

Question

Я применяю 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> 

И СКС тогда так:

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

Если вам необходимо для перехода между двумя различными фильтрами, просто применить другой фильтр к заднему элементу.