Search code examples
svgsvg-filters

SVG Filter animation feColorMatrix

I'm trying to make a hover effect on an image using SVF filters. My problem is that I don't know how to make the effect to last. I can give 1 second of duration but I can't keep the values of the feColorMatrix as I want.

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

I want the green effect to stay there as long as the hover is there.

Thank you

Here is the jsFiddle

Solution

  • If you add fill="freeze" the animation will stay like it is once it's finished. You may want to add something to reset the animation on mouseout too.

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