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?

geocodezip
  • 158,664
  • 13
  • 220
  • 245
howardrocks
  • 343
  • 1
  • 7
  • 17
  • Check this library out: http://raphaeljs.com/. It can't load SVG files very well (there's a mostly-functional plugin), but it is amazing at animations. – Blender Jan 27 '12 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 Jan 27 '12 at 22:08

1 Answers1

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>
pascal
  • 2,623
  • 2
  • 20
  • 30