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

#javascript #css3 #html5 #svg #svg_animation

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

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



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





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

Ответы

Ответ 1

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

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



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





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



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





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



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





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



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





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


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


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

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

    

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