如何为单个SVG多边形点添加动画效果？

Question

如何在SVG中使用velocity.js动画（移动）单个多边形点？

谢谢您的帮助！

<p>From...</p>

<svg height="250" width="500">
  <polygon points="0,0 200,0 200,200 00,200" style="fill:green" />
</svg>

<p>to...</p>
<svg height="250" width="500">
  <polygon points="0,0 300,0 200,200 00,200" style="fill:blue" />
</svg>

- Elvis

Answer 1

由于 <animate> 标签不久将被废弃，这里提供了一种使用 d3.js 的替代方法。

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="250" width="500">
  <polygon id="my-polygon" points="0,0 200,0 200,200 00,200" fill="blue" />
</svg>
<input type="button" value="click me" onclick="transformPolygon()"/>
<script type="text/javascript">
  function transformPolygon() {
    var myPolygon = d3.select(document.getElementById('my-polygon'))
    myPolygon
      .transition()
      .duration(1500)
      .ease("elastic")
      .attr('fill','green')
      .attr('points','0,0 300,0 200,200 00,200')
  }    
</script>

- peteroid

---

这真的很有趣。谢谢@Peteroid。 - DanMad

Answer 2

这个对您来说合适吗？

<svg height="250" width="500">
  <polygon points="0,0 200,0 200,200 00,200" style="fill:blue">
    <animate begin="shape.click" id="animation-to-click" begin="indefinite" fill="freeze" attributeName="points" dur="500ms"  to="0,0 300,0 200,200 00,200" />
  </polygon>
</svg>
<input type="button" value="click me" onclick="document.getElementById('animation-to-click').beginElement()"/>

- Zamboney

---

谢谢！这正是我一直在寻找的效果。只是我正在一个JavaScript队列中使用这个动画，所以我希望能够使用velocity.js来解决问题。 - Elvis

也许你可以用 JavaScript 来完成，然后将其添加到队列中？ - Zamboney