动画SVG第二循环的行为有所不同

Question

我创建了一个动画SVG，其中基本上设置了4个动画状态。在状态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>