SVG Filter animation feColorMatrix

Question

Я пытаюсь сделать эффект зависания изображения, используя фильтры SVF. Моя проблема в том, что я не знаю, как сделать эффект последним. Я могу дать 1 секунду продолжительности, но я не могу сохранить valuesfeColorMatrix, как я хочу.

<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

Если добавить заполнить = «заморозить» анимация будет оставаться, как это когда-то закончил. Вы можете добавить что-то к reset the animation on mouseout too.

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