Animation 单击即可切换SVG动画

我正在尝试创建一个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>

第一次单击元素时，它会像应该的那样平滑地模糊。但是，当我再次单击时，它将在没有任何动画的情况下解除模糊。然后从那一点开始，它只是在每次点击时在模糊和非模糊之间切换，没有任何动画

为什么动画只在第一次点击时起作用，我如何让它每次都起作用

这是一把小提琴：

---

出于某种原因，如果将SVG内联到小提琴中的HTML中，动画根本不起作用。如果我将其拆分为一个单独的.svg文件，那么它将在Firefox中进行动画制作，但这只是第一次。

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

解决这个问题的一种方法是使动画开始=不确定，然后通过调用动画上的beginElement来使用javascript开始它们

---

我在狩猎中也遇到了同样的问题。这些动画在单击时效果很好。他们再次在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源了……

出于兴趣，您是否尝试过在没有svg作为链接的情况下加载它？您的意思是什么？否则我将如何引用它？是否可能包含一个示例JSFIDLE，这可能有助于测试？使用链接更新了我的问题，但请注意，动画在JSFIDLE中无法使用HTML部分中定义的SVG。您必须在本地复制它，并将SVG拆分为一个单独的.SVG文件，才能在Firefox.Wow中看到动画！这很有帮助。但有一件奇怪的事情是，当我再次单击以取消模糊图像时，在Safari中，图像下方会留下一个模糊版本的伪影：。Firefox中没有这样的问题。有什么想法吗？我尝试用overflow:hidden；，将图像包装到另一个div中；，但这没用。我只为Firefox做贡献。因此，野生动物园的虫子不是我的！

<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();
    }
};

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