如果只是单纯的改变宽度，少年可以这样实现

<svg>
    <rect x='20' y='20' width='250' height='250' fill='blue'>
        <animate animateType="css" attributeName="width" values="250;0;250" dur="3s" repeatCount="indefinite"/>
    </rect>
</svg>

给animate添加id后，使用begin来指定动画开始的时间为另一个的结束。

不清楚有没有更好的办法。

<svg>
    <rect x="20" y="20" width="241.667" height="250" fill="blue">
        <animate attributeType="CSS" attributeName="width" begin="0s; second.end" id="first" from="250" to="0" dur="1s"></animate>
        <animate attributeType="CSS" attributeName="width" begin="first.end" id="second" from="0" to="250" dur="1s"></animate>
    </rect>
</svg>