假设您有以下 Hello 标签的 SVG 动画，当您单击小方块时会触发该动画：
<svg viewBox="0 0 100 50" style="width:200px; height:100px;">
<rect x="40" width="10" height="10" y="40">
<animateTransform id="myanim" begin="click"></animateTransform>
</rect>
<text x="45" y="20" width="50" height="10" text-anchor="middle">Hello
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 45 20" to="90 45 20" dur="0.5s" begin="myanim.begin" repeatCount="1" additive="sum" fill="freeze"></animateTransform>
</text>
</svg>如果再次单击按钮，如何以相反的逻辑执行相同的动画；即在每（2 n）次点击时将hello元素旋转回其原始状态，并在每（2 n - 1）次点击时将其旋转以再次垂直显示？