Fatal编程技术网
  • svg/
  • SVG过滤器动画feColorMatrix

SVG过滤器动画feColorMatrix

svg

SVG过滤器动画feColorMatrix,svg,svg-filters,Svg,Svg Filters,我正在尝试使用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

我正在尝试使用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>





如果添加fill=“freeze”，动画完成后将保持原样。您可能想在中添加一些内容


非常感谢。使用冻结帮助我。最后一件事是：

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