Как анимировать одиночную точку полигонов SVG?

Question

Как настроить (перемещать) одну точку полигона внутри SVG? Если возможно, используя speed.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>

Answer 1

это за сьютов вы?

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

Answer 2

Поскольку <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>