Question

我正在尝试创建一个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中生成动画，但只是第一次。

Answer 1

点击背景后，动画时间轴从0秒到0.4秒，然后在动画结束时停止。下次单击文档时间轴时仍为0.4秒，因此动画仅从0s到0.4s不会发生任何事情。

解决这个问题的一种方法是让动画开始=＆＃34;无限期＆＃34;然后通过在动画上调用beginElement来使用javascript开始它们。 Like so ...

<div class="background" style="background-image: url('https://www.google.com/images/srpr/logo11w.png');"></div>

<svg>
    <defs>
        <filter id="blurred">
            <feGaussianBlur in="SourceGraphic" stdDeviation="0 0">
                <animate id="blurredAnimation" attributeType="XML" attributeName="stdDeviation" from="0 0" to="2 50" dur="0.4s" fill="freeze" begin="indefinite" />
            </feGaussianBlur>
        </filter>
        <filter id="unblurred">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2 50">
                <animate id="unblurredAnimation" attributeType="XML" attributeName="stdDeviation" from="2 50" to="0 0" dur="0.4s" fill="freeze" begin="indefinite" />
            </feGaussianBlur>
        </filter>
    </defs>
</svg>

$(document).on("click", ".background", function(){ var background = $(this); toggleBlur(background); });

function toggleBlur(background) {
    if (!(background.hasClass("blurred"))) {
        background.addClass("blurred");
        background.css({
            filter: "url(#blurred)",
            webkitFilter: "url(#blurred)"
        });
        document.getElementById("blurredAnimation").beginElement();
    } else {
        background.removeClass("blurred");
        background.css({
            filter: "url(#unblurred)",
            webkitFilter: "url(#unblurred)"
        });
        document.getElementById("unblurredAnimation").beginElement();
    }
};

Answer 2

我在Safari上遇到了同样的问题。动画在点击上运作良好。他们再次在FF和Chrome中工作（IE根本不起作用），但在Safari中却没有。

Safari只做了一次动画，但从未做过两次。

解决方法：关闭菜单后（因此svg再次处于初始状态）我用自己替换了元素。之后动画可以再次启动，因为Safari从头开始“

”

唯一的缺点：你需要用JavaScript替换元素。

这段代码帮助了我：

window.setTimeout(function(){
    $('svg#button').replaceWith('<svg id="button" viewBox="-374 350 210 70"><polygon style="stroke:#dfdfdf;stroke-width:5;stroke-linejoin:round" fill="#eeeeee" points="-366.500 308.500, -366.500 253.500, -196.900 253.500, -171.500 281.000, -196.900 308.500, -366.500 308.500"><animate id="animation-to-check" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="-366.500 497.500, -366.500 253.500, -171.500 253.500, -171.500 281.000, -171.500 497.500, -366.500 497.500" values="-366.500 308.500, -366.500 253.500, -196.900 253.500, -171.500 281.000, -196.900 308.500, -366.500 308.500;-366.500 308.500, -366.500 253.500, -171.500 253.500, -171.500 281.000, -171.500 308.500, -366.500 308.500;-366.500 497.500, -366.500 253.500, -171.500 253.500, -171.500 281.000, -171.500 497.500, -366.500 497.500"/><animate id="animation-to-star" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="-366.500 308.500, -366.500 253.500, -196.900 253.500, -171.500 281.000, -196.900 308.500, -366.500 308.500" values="-366.500 497.500, -366.500 253.500, -171.500 253.500, -171.500 281.000, -171.500 497.500, -366.500 497.500;-366.500 308.500, -366.500 253.500, -171.500 253.500, -171.500 281.000, -171.500 308.500, -366.500 308.500;-366.500 308.500, -366.500 253.500, -196.900 253.500, -171.500 281.000, -196.900 308.500, -366.500 308.500;"/></polygon></svg>');
},700);

也许你可以使用占位符onload，所以你不需要加载svg-sources两次......

单击切换SVG动画

2 个答案: