異なるsvgフィルタ間の移行 - どのように？

Question

jpg-imagesに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

あなたがしたいことを達成する最も簡単な方法は、要素の2つのコピーを直接重ねることです。フィルタを上の方に適用し、ホバー上でフェードアウトします（下の方が現れます）。

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

あなただけの後部要素に他のフィルタを適用し、二つの異なるフィルタの間で移行する必要がある場合。