SVG 过滤动画 feColorMatrix

Question

我正在尝试使用 SVF 滤镜在图像上制作悬停效果。我的问题是我不知道如何使效果持久。我可以提供 1 秒的持续时间，但我无法按我的意愿保留 feColorMatrix 的 values。

<filter id="blurred" color-interpolation-filters="sRGB" x="0%" y="0%" height="10%" width="10%">
  <feColorMatrix result="wispy" type="matrix" values="8 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0">
    <animate 
    attributeType="XML" 
    id="blurredAnimation" 
    attributeName="values" 
    from="8 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0" 
    to="3 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0" 
    dur="1s" 
    values = "8 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0;3 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0;"
    keyTimes = "0;1"
    begin="indefinite" />
  </feColorMatrix>
</filter>

只要悬停在那里，我希望绿色效果保持在那里。

谢谢

这里是jsFiddle

Answer 1

如果您添加 fill="freeze"，动画将在完成后保持原样。您可能想向reset the animation on mouseout too 添加一些内容。

function toggleBlurOff(background) {
    document.getElementById("svg").setCurrentTime(0);
};