如何为svg过滤器feComponentTransfer设置动画?

时间:2019-04-15 12:30:19

标签: jquery html css svg

有人知道如何在feComponentTransfer的feFuncRGB中使用动画标签吗?我有一个SVG过滤器,我需要在单击时显示/隐藏它并进行一些转换。

类似的东西:

<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相同

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

谢谢!

1 个答案:

答案 0 :(得分:2)

一种解决方案是使用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_cyan_blue">
            <feFuncR type="table" tableValues="0 1">
               <animate 
                id="_animate"
                attributeName="tableValues" 
                dur="2s" 
                values="0 1;1 0" 
                fill="freeze"
                begin="svg.click"
                />
            </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>