有人知道如何在 feComponentTransfer 的 feFuncRGB 中使用 animate 标签吗?我有一个 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();
});
谢谢!
最佳答案
一种解决方案是使用 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>
关于jquery - 如何对 svg 过滤器 feComponentTransfer 进行动画处理?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55689244/