javascript - 如何在单击时使用带有 javascript 的 svg 内嵌动画?

标签 javascript jquery css animation svg

我目前正在一个网络元素中使用 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/

相关文章:

html - HTML 中的 div 标签相互重叠

javascript - 如何使用存储在变量中的值调用函数?

php - 使用jquery刷新div中的信息

javascript - Firefox javascript问题设置变量

javascript - 增加可点击区域的输入范围

javascript - 如何在 PRE 标记中显示来自 AJAX 请求的 XML 响应

javascript - 如何使用 jQuery 检测浏览器屏幕宽度增加超过某个点?

php - document.ready 页面重新加载

javascript - 我的 anchor 文本突然无法点击

html - 如何使用CSS使一个ul的多个li中的图像按底部边缘对齐?