重新启动JavaScript中的SVG动画

Question

我有一个用SVGator制作动画的SVG徽标。动画效果很好，但是页面加载后仅启动了一次。当我们位于页面顶部时，我想重新启动动画。所有动画代码都在带有@keyframe的CSS中，没有动画标签。 所以我开始写这段代码：

window.addEventListener('scroll', function(e)
{
    var obj = document.getElementById("logoObject");
    var svgDocument = obj.contentDocument;
    var svg = svgDocument.getElementById("el_71OxW7D4T");

    if(window.scrollY === 0)
    {
        svg.classList.add("test");
    }
    else
    {
        svg.classList.remove("test");
    }
});

我的SVG徽标在对象标签中：

<object id="logoObject" type="image/svg+xml" data="logo.svg">Your browser does not support SVGs</object>

有CSS：

.test *
{
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

我认为，当我们位于页面顶部时，我只需要添加测试类（它告诉它必须一次启动动画），然后它将再次启动动画。但是，事实并非如此，这就是为什么我在这里:)该类添加得很好，但是动画没有重新启动。

徽标看起来像这样：

<?xml-stylesheet type="text/css" href="svg.css"?>
<svg version="1.1" id="el_71OxW7D4T" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 202" style="enable-background:new 0 0 500 202.6;" xml:space="preserve">
<style>@-webkit-keyframes el_diuUZ2DUDD_aYrQ2-aFh_Animation{56.67%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}63.33%{-webkit-transform: scale(0.5, 0.5);transform: scale(0.5, 0.5);}70%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}0%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}100%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}}@keyframes el_diuUZ2DUDD_aYrQ2-aFh_Animation{56.67%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}63.33%{-webkit-transform: scale(0.5, 0.5);transform: scale(0.5, 0.5);}70%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}0%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}100%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}}@-webkit-keyframes el_2RUyEg0-aS_SaO49EDRC_Animation{44.44%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}52.22%{-webkit-transform: rotate(90deg);transform: rotate(90deg);}58.89%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}}@keyframes el_2RUyEg0-aS_SaO49EDRC_Animation{44.44%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}52.22%{-webkit-transform: rotate(90deg);transform: rotate(90deg);}58.89%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}}@-webkit-keyframes el_AovohrL0Qb_iqXkLZS7U_Animation{33.33%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}40%{-webkit-transform: translate(0px, -25px);transform: translate(0px, -25px);}46.67%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}0%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}100%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}}@keyframes el_AovohrL0Qb_iqXkLZS7U_Animation{33.33%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}40%{-webkit-transform: translate(0px, -25px);transform: translate(0px, -25px);}46.67%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}0%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}100%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}}@-webkit-keyframes el_Cj8OzxECuE_Ms8vh6xoC_Animation{33.33%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}40%{-webkit-transform: translate(0px, 25px);transform: translate(0px, 25px);}46.67%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}0%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}100%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}}@keyframes el_Cj8OzxECuE_Ms8vh6xoC_Animation{33.33%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}40%{-webkit-transform: translate(0px, 25px);transform: translate(0px, 25px);}46.67%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}0%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}100%{-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}}#el_71OxW7D4T *{-webkit-animation-duration: 3s;animation-duration: 3s; webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);animation-timing-function: cubic-bezier(0, 0, 1, 1);}#el_Cj8OzxECuE{fill: #0033FF;}#el_AovohrL0Qb{fill: #0033FF;}#el_2RUyEg0-aS{fill: #0033FF;}#el_diuUZ2DUDD{fill: #0033FF;}#el_Cj8OzxECuE_lURMGmrI6{-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;transform-box: fill-box;-webkit-transform: scale(1, 0);transform: scale(1, 0);}#el_Cj8OzxECuE_Ms8vh6xoC{-webkit-animation-name: el_Cj8OzxECuE_Ms8vh6xoC_Animation;animation-name: el_Cj8OzxECuE_Ms8vh6xoC_Animation;-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;transform-box: fill-box;-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}#el_AovohrL0Qb_iqXkLZS7U{-webkit-animation-name: el_AovohrL0Qb_iqXkLZS7U_Animation;animation-name: el_AovohrL0Qb_iqXkLZS7U_Animation;-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;transform-box: fill-box;-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}#el_2RUyEg0-aS_SaO49EDRC{-webkit-animation-name: el_2RUyEg0-aS_SaO49EDRC_Animation;animation-name: el_2RUyEg0-aS_SaO49EDRC_Animation;-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;transform-box: fill-box;-webkit-transform: rotate(0deg);transform: rotate(0deg);}#el_diuUZ2DUDD_aYrQ2-aFh{-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;transform-box: fill-box;-webkit-transform: scale(1, 1);transform: scale(1, 1);-webkit-animation-name: el_diuUZ2DUDD_aYrQ2-aFh_Animation;animation-name: el_diuUZ2DUDD_aYrQ2-aFh_Animation;}</style>

<g id="el_BIbCB5SzVB">
    <g id="el_Cj8OzxECuE_Ms8vh6xoC" data-animator-group="true" data-animator-type="0"><path class="firstb" d="M80.6,75.1c20.1,0,33.2-10.6,33.2-28.1c0-16.8-11.3-27.8-34-27.8H49.1v55.9H80.6z" id="el_Cj8OzxECuE"/></g>
    <g id="el_AovohrL0Qb_iqXkLZS7U" data-animator-group="true" data-animator-type="0"><path class="secondb" d="M85.3,183.3c22.3,0,35.8-11.7,35.8-30.3c0-17.9-13.2-30.3-35.8-30.3H49.1v60.7H85.3z" id="el_AovohrL0Qb"/></g>
    <g id="el_2RUyEg0-aS_SaO49EDRC" data-animator-group="true" data-animator-type="1"><polygon points="177.5,125.2 240.3,125.2 209.3,35.6 &#9;" id="el_2RUyEg0-aS"/></g>
    <g id="el_diuUZ2DUDD_aYrQ2-aFh" data-animator-group="true" data-animator-type="2"><path d="M377.5,178.9c35.8,0,74.5-24.1,74.5-78.2c0-54.1-38.7-78.6-74.5-78.6c-36.2,0-74.9,24.5-74.9,78.6&#10;&#9;&#9;C302.6,154.8,341.4,178.9,377.5,178.9z" id="el_diuUZ2DUDD"/></g>
</g>
<script>(function(){var a=document.querySelector('#el_71OxW7D4T'),b=a.querySelectorAll('style'),c=function(d){b.forEach(function(f){var g=f.textContent;g&amp;&amp;(f.textContent=g.replace(/transform-box:[^;\r\n]*/gi,'transform-box: '+d))})};c('initial'),window.requestAnimationFrame(function(){return c('fill-box')})})();</script></svg>

我不知道该怎么办...有人会知道吗？

先谢谢您

ArbreMojo。

编辑：

我的问题不是缓存问题，因为我使用的是object标签，因此每次刷新页面时都会启动动画。