SVG 滤镜动画 feColorMatrix

Question

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

<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);
};