4

How do i animate (move) a single polygon point within a SVG? If possible, using velocity.js.

Thanks for your help!

<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
  • 289
  • 4
  • 14

2 Answers2

4

Since the <animate> tag will be deprecated soon, here is an alternative with 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
  • 1,116
  • 10
  • 13
2

is this suites you?

<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
  • 2,002
  • 12
  • 22
  • Thank you! This is the effect i've been looking for. It's just that i'm using this animation inside a javascript queue, so i would hope for a solution using velocity.js. – Elvis Mar 16 '16 at 08:00
  • may be you can do it with javascript just and append it to the queue? – Zamboney Mar 16 '16 at 08:04