Как анимировать SVG фильтр FeComponentTransfer?

193

31 января 2020, 08:00

Кто-нибудь знает, как использовать тег animate в feFuncRGB в feComponentTransfer?
У меня есть фильтр SVG, и мне нужно показать / скрыть его по щелчку с transition.

Что-то вроде этого:

$('img').click( function() { 
  $("#animate").beginElement(); 
});

<svg xmlns="http://www.w3.org/2000/svg" id="svg-filters"> 
    <filter id="duotone"> 
        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_cyan_blue"> 
            <feFuncR type="table" tableValues="0.2489 0.9589"> 
                <animate  
                id="animate" 
                attributeName="tableValues"  
                dur="2s"  
                from="0 1"  
                to="0.2489 0.9589"  
                fill="freeze"  
                /> 
            </feFuncR> 
        </feComponentTransfer> 
    </filter> 
</svg>

И сделать тоже самое для каналов feFuncG и feFuncB.

Answer 1

Одним из решений будет использование изображения SVG c применением фильтра feComponentTransfer с красным каналом feFuncR. Например, так:

Анимация применение фильтра начнётся после клика на изображении

svg.addEventListener("click",() =>{ 
  _animate.beginElement(); 
})

<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="300" height="300" > 
    <filter id="duotone"> 
        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_red"> 
            <feFuncR type="table" tableValues="0 1"> 
               <animate  
                id="_animate" 
                attributeName="tableValues"  
                dur="4s"  
                values="0 1;1 0;1 0;0 1"  
                fill="freeze" 
                begin="svg.mouseover" 
                /> 
            </feFuncR> 
        </feComponentTransfer> 
    </filter> 
   
  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" width="300" height="300" filter="url(#duotone)"></image> 
</svg>

Анимация зелёного канала feFuncG:

svg.addEventListener("click",() =>{ 
  _animate.beginElement(); 
})

<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="300" height="300" > 
    <filter id="duotone"> 
        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_green"> 
            <feFuncG type="table" tableValues="0 1"> 
               <animate  
                id="_animate" 
                attributeName="tableValues"  
                dur="3s"  
                values="0 1;1 0;1 0;0 1"  
                fill="freeze" 
                begin="svg.mouseover" 
                /> 
            </feFuncG> 
        </feComponentTransfer> 
    </filter> 
   
  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" width="300" height="300" filter="url(#duotone)"></image> 
</svg>

Анимация синего канала feFuncВ:

svg.addEventListener("click",() =>{ 
  _animate.beginElement(); 
})

<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="300" height="300" > 
    <filter id="duotone"> 
        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_blue"> 
            <feFuncB type="table" tableValues="0 1"> 
               <animate  
                id="_animate" 
                attributeName="tableValues"  
                 dur="3s"  
                values="0 1;1 0;1 0;0 1"  
                fill="freeze" 
                begin="svg.mouseover" 
                /> 
            </feFuncB> 
        </feComponentTransfer> 
    </filter> 
   
  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" width="300" height="300" filter="url(#duotone)"></image> 
</svg>

Анимация альфа канала (прозрачности):

svg.addEventListener("click",() =>{ 
  _animate.beginElement(); 
})

<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="300" height="300" > 
    <filter id="duotone"> 
        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_A"> 
            <feFuncA type="table" tableValues="0 2"> 
               <animate  
                id="_animate" 
                attributeName="tableValues"  
                dur="2s"  
                values="0 1;1 0.1"  
                fill="freeze" 
                begin="svg.click" 
                /> 
            </feFuncA> 
        </feComponentTransfer> 
    </filter> 
   
  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" width="300" height="300" filter="url(#duotone)"></image> 
</svg>

Примечание переводчика:

feComponentTransfer один из самых мощных примитивов фильтра SVG. Он дает нам контроль над отдельными каналами RGBA нашего источника графики, позволяя создавать в SVG эффекты, подобные Photoshop.
Более подробно здесь

В следующем примере для красного канала будет применён набор атрибутов type="linear" slope="1" intercept="0".

При наведении курсора будет анимирован атрибут slope values="1;4":

И лето плавно заменится осенью.

<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="400" height="300" > 
    <filter id="duotone"> 
  <fecomponenttransfer> 
  <fefuncR type="linear" slope="1" intercept="0" > 
   <animate  
                id="_animate" 
                attributeName="slope"  
                dur="3s"  
                values="1;4;4;1"  
                fill="freeze" 
                begin="svg.mouseover" 
                />  
  <fefuncG type="linear" slope="1" intercept="0" /> 
  <fefuncB type="linear" slope="1" intercept="0" /> 
</fecomponenttransfer> 
    </filter> 
   
  <image xlink:href="https://i.stack.imgur.com/PwDWY.jpg" width="100%" height="100%" filter="url(#duotone)"></image> 
</svg>