Question

我想让我的svg缩小onclick，并在缩小时逐渐增加。

这是如何实现的？我在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>

如何根据他的状态触发动画或其他动画？＃34; ？

感谢。

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>

SVG动画往返？

1 个答案: