Tuesday, 13 November 2012

Examining Inkscape SVG animation example. Rectangle moving along path.


Examining Inkscape SVG animation example. Rectangle moving along path.
Adding comments to explain the elements a bit better.
And playing a little too.

For the path element detail see also http://www.w3.org/TR/SVG/paths.html
Path Line Example "Mx,y A? ? ? ? ? || x y A? ? ? ? ? || x y .... (repeats, ending on x y) x y"

   M l c - moveto line curve
   L x y - lineto x y
   A rx ry xrotate bLarge bSweep x y - ellipticalArc
   Z - closepath

e.g. path id="myAniPath" d="M10,150 A15 15 180 0 1 70 140 A15 25 180 0 0 130 130 A15 55 180 0 1 190 120 A15 10 170 0 1 10 150"

Nuts. Cannot treat .svg as simple image with blogger.
Also have not yet found an easy+safe way to post in code snippets. 

Look at this (and view source on this, and click the green and purple boxes): http://www.dspsrv.com/~jamesc/motionpathJCO.svg


No comments: