SVG动画往返？
SVG动画往返？
提问于 2017-07-04 23:53:01
我想让我的svg缩小，当收缩时，我的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>我怎么能根据他的“状态”来触发动画呢？
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-05 00:46:08
你不能每次点击纯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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44915316
复制相关文章
相似问题
腾讯云开发者
