Elvis Elvis - 4 months ago 81
Javascript Question

How to animate a single SVG Polygon Point?

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>




Answer

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()"/>