I am working with SVG in HTML to define specific shapes using the polyline tool. I am looking to animate the appearance of a specific shape into a different shape at the touch of a button and over a few seconds.
I have been looking at using the animate tool to change the polylines points attribute, but have so far been unable to find a solution or something that works perfectly.
Is it possible to do this? If not, is there a viable alternative?
SVG graphics can be animated using animation elements. The animation elements were initially defined in the SMIL Animation specification; these elements include: <animate></animate> – which allows you to animate scalar attributes and properties over a period of time.
Adding classes to the SVG allows CSS to select the individual shapes within the image. This means you can animate different shapes of the image at different times, creating a more complex effect.
You can supply polylines (and even paths with bezier curves etc) to tween, as long as they have the same number of points, because SVG just moves each (control) point independently. If the shapes don't have the same number of control points, you could just coincide some, but I guess graphical editors will "correct" this.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="5cm" viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline stroke="red" stroke-width="3" fill="none">
<animate attributeName="points" dur="5s" repeatCount="indefinite"
from="100,100 900,100 900,900 100,900 100,100"
to="200,200 800,500 800,500 200,800 200,200"
/>
</polyline>
</svg>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With