svg动画 animateTransform叠加问题，如何顺序连续播放后循环？

Question

三个animateTransform顺序播放后，停留在最后一个循环，请问如何才能让三个动画顺序播放后，在从第一个接着播放。

<svg viewBox="0.0 0.0 385 385" fill="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg">
    <g>        
        <path fill="#444444" d="M286.975 95.449a135.43 135.43 0 0 1 .316 191.842l-95.764-95.764z"/>
        <animateTransform attributeName="transform" id="p31" begin="0s" dur="0.5s" type="rotate" from="180 192.5 192.5" to="225 192.5 192.5" repeatCount="indefinite" />
        <animateTransform attributeName="transform" id="p32" begin="0.5s" dur="1.5s" type="rotate" from="225 192.5 192.5" to="315 192.5 192.5" repeatCount="indefinite" />
        <animateTransform attributeName="transform" id="p33" begin="2s" dur="1s" type="rotate" from="315 192.5 192.5" to="360 192.5 192.5" repeatCount="indefinite" />
    </g>
</svg>

Answer 1

根据chrome develop tools提示，这种动画方式是过时的方式，将来不在被支持，我用css3的方式解决了这个问题。

Answer 2

你这个问题我研究了一下午
现在好了

<svg viewBox="0 0400 400" fill="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg">
     <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(99,99,99);stroke-width:2"/>
    <line x1="0" y1="0" x2="0" y2="400" style="stroke:rgb(99,99,99);stroke-width:2"/>   

    <line x1="0" y1="100" x2="400" y2="100" style="stroke:rgb(99,99,99);stroke-width:2"/>
    <line x1="100" y1="0" x2="100" y2="400" style="stroke:rgb(99,99,99);stroke-width:2"/>  
    

    <g>
        <path fill="red"  stroke="yellow" d="M 100 100 L 150 100 A50 50 0 0,0 100 50 z">
        
        <animateTransform attributeName="transform" id="p31" begin="0s" dur="1s" type="rotate" from="0 100 100"  to="90 100 100" repeatCount="indefinite"  />        

        <animateTransform attributeName="transform" id="p32" begin="1s" dur="1s" type="rotate" from="90 100 100"  to="180 100 100" repeatCount="indefinite" additive="sum" />    
        
        <animateTransform attributeName="transform" id="p33" begin="2s" dur="1s" type="rotate" from="180 100 100"  to="270 100 100"  repeatCount="indefinite" additive="sum" />            

        <animateTransform attributeName="transform" id="p34" begin="3s" dur="1s" type="rotate" from="270 100 100"  to="360 100 100"  repeatCount="indefinite" additive="sum" />    
        </path>            
        </g>            
</svg>