如何在点击时使用带有javascript的svg的内联动画？

Question

我目前正在使用svg进行一个web项目。我正在用多边形(确切地说是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内联，但它确实需要具有响应性。

Answer 1

单击该按钮时，获取所需的动画元素(如果已为其提供id，则可以使用document.getElementById更容易)，并调用element.beginElement()