我目前正在一个网络元素中使用 svg。我正在用多边形(准确地说是 45 个多边形)制作建筑物,我的想法是在您单击按钮时更改多边形的点。这样它就会在两者之间制作动画,从而使建筑物切换到不同的建筑物。
我设法在 svg 上制作内联动画,以便在您打开页面时它会动画(暂时有延迟)。但我现在想要做的是,当您单击一个按钮时,内联动画将会触发。
这是来自一个多边形的一行代码。
<polygon class="b1" fill="#DCDDDB" points="555,114 552.5,416 568.5,413.004 ">
<animate begin="8000ms" attributeName="points" dur="5000ms" to="473.999,335.287 470.845,482.398 461.808,325.766" fill="freeze"/>
</polygon>
我希望有人能帮助我。 我试着用 css3 -webkit-clip-path 来做,但这需要很长时间来创建多边形。内联 svg 并非完全必要,但它确实需要响应。
最佳答案
当按钮被点击时,获取你想要的动画元素(如果你给它一个 id 就更容易了,所以你可以使用 document.getElementById)并调用 element.beginElement()
关于javascript - 如何在单击时使用带有 javascript 的 svg 内嵌动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30563135/