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