SVG动画往返？答案

【问题标题】：SVG animation Round Trip?SVG动画往返？
【发布时间】：2017-07-05 14:04:03
【问题描述】：

我想让我的 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>

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

谢谢。

【问题讨论】：

标签： javascript svg

【解决方案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>

【讨论】：