javascript - SVG 动画往返？

Question

我想让我的 svg 在点击时收缩，并在收缩时随着点击而增长。

这是如何实现的？我在 Javascript 中尝试了一些东西，但找不到简单的方法来继续。

例如这个 SVG:

    <svg id="MyRect" width="100" height="100" viewbox="0 0 100 100">
        <polygon fill="#000000" points="0,0 0,100 100,100 100,0">
            <animate id="shrink" attributeName="points" begin="undefined" restart="whenNotActive" dur="1s" from="0,0 0,100 100,100 100,0" to="30,30 30,70 70,70 70,30" fill="freeze" />
            <animate id="grow" attributeName="points" begin="undefined" restart="whenNotActive" dur="1s" from="30,30 30,70 70,70 70,30" to="0,0 0,100 100,100 100,0" fill="freeze" />
        </polygon>
    </svg>

如何根据他的“状态”触发动画或其他动画？

谢谢。

Answer 1

每次使用纯 SMIL 单击时，您无法更改动画，因此我在具有不同动画的两个多边形之间交换。我的解决方案不需要 JavaScript。

    <svg id="MyRect" width="100" height="100" viewBox="0 0 100 100">
        <polygon fill="#000000" points="0,0 0,100 100,100 100,0">
            <animate id="shrink" attributeName="points" begin="click" restart="whenNotActive" dur="1s" to="30,30 30,70 70,70 70,30" fill="freeze" />
            <set attributeName="display" begin="shrink.end" to="none" />
            <set attributeName="display" begin="grow.end" to="block" />
            <set attributeName="points" begin="grow.end" to="0,0 0,100 100,100 100,0" />
        </polygon>
        <polygon fill="#000000"  points="30,30 30,70 70,70 70,30" display="none">
            <animate id="grow" attributeName="points" begin="click" restart="whenNotActive" dur="1s" to="0,0 0,100 100,100 100,0" fill="freeze" />
            <set attributeName="display" begin="grow.end" to="none" />
            <set attributeName="display" begin="shrink.end" to="block" />
            <set attributeName="points" begin="grow.end" to="30,30 30,70 70,70 70,30" />
        </polygon>
    </svg>