5

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?

2
  • Check this library out: raphaeljs.com. It can't load SVG files very well (there's a mostly-functional plugin), but it is amazing at animations.
    – Blender
    Commented Jan 27, 2012 at 16:29
  • You say that you can't find a solution that works "perfectly"; can you describe what has worked and what problems you've found? That might help others see what your needs are before proposing solutions that aren't good enough.
    – Phrogz
    Commented Jan 27, 2012 at 22:08

1 Answer 1

13

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>
1
  • How can i do this on hover of that svg? I mean o say how to animate SVG on its own hover?
    – Sohil Shah
    Commented Jul 23, 2016 at 11:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.