我正在尝试创建一个 SVG 动画,该动画在单击元素时平滑地模糊它,然后在再次单击时平滑地取消模糊它(并在每次单击时保持交替)。
所以我有以下SVG:
<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blurred">
<feGaussianBlur in="SourceGraphic" stdDeviation="0 0">
<animate attributeType="XML" attributeName="stdDeviation" from="0 0" to="0 50" dur="0.4s" fill="freeze" />
</feGaussianBlur>
</filter>
<filter id="unblurred">
<feGaussianBlur in="SourceGraphic" stdDeviation="0 50">
<animate attributeType="XML" attributeName="stdDeviation" from="0 50" to="0 0" dur="0.4s" fill="freeze" />
</feGaussianBlur>
</filter>
</defs>
</svg>
然后我用这些功能切换显示哪个过滤器:
function blurItem(item) {
var background = item.find(".background");
background.css("filter", "url(css/filter.svg#blurred)");
}
function unblurItem(item) {
var background = item.find(".background");
background.css("filter", "url(css/filter.svg#unblurred)");
}
第一次单击该元素时,它会像应有的那样平滑模糊。但是当我再次单击时,它会在没有任何动画的情况下取消模糊。然后从那时起,它只是在每次点击时在模糊和不模糊之间切换,没有任何动画。
为什么动画只在第一次点击时起作用,我如何让它每次都起作用?
这是一个小提琴:http: //jsfiddle.net/7Pcdp/2/
出于某种原因,在小提琴的 HTML 中内联 SVG 时,动画根本不起作用。如果我将它拆分为一个单独的 .svg 文件,那么它将在 Firefox 中进行动画处理,但只是第一次。