Анимированный SVG второй цикл ведет себя по-разному - PullRequest
Новая
       36

Анимированный SVG второй цикл ведет себя по-разному

0 голосов
/ 14 апреля 2019

Я создал анимированный SVG с четырьмя состояниями, между которыми я анимирую. После состояния 4 я оживляю его до состояния 1, поэтому оно должно быть готово к повторной прокрутке.

Однако во втором цикле все анимации ведут себя по-разному, и я не уверен, почему ...

https://codepen.io/robpoole/pen/rbGaZa

<svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <polygon points="125,223 185,119 415,119 475,223" class="one">
        <animateTransform
            id="d1" 
            attributeName="transform" 
            type="rotate"
            from="0 225.5 181.5" 
            to="120 225.5 181.5" 
            dur="1s" 
            begin="3s; d4.end" 
            fill="freeze" 
            additive="sum" 
        />
        <animateTransform
            id="d2" 
            attributeName="transform" 
            type="translate"
            from="0 0" 
            to="65 -19" 
            dur="1s" 
            begin="d1.end+1s" 
            fill="freeze" 
            additive="sum" 
        />
        <animateTransform
            id="d3" 
            attributeName="transform" 
            type="translate"
            from="0 0" 
            to="50 0" 
            dur="1s" 
            begin="d2.end+1s" 
            fill="freeze" 
            additive="sum" 
        />
        <animateTransform
            id="d4" 
            attributeName="transform" 
            type="rotate"
            from="0 288.5 205.3" 
            to="-120 288.5 205.3" 
            dur="1s" 
            begin="d3.end+1s" 
            fill="freeze" 
            additive="sum" 
        />
    </polygon>

</svg>
...