html5 - Animate a "div" through SVG path -

html5 - Animate a "div" through SVG path -

i noob html5, svg. need move html "div" object through svg path created.

my html this

<div class="movepath"> <div class="car" id="car"></div> <svg id="canvas" width="1000px" class="content" xmlns="http://www.w3.org/2000/svg" height="370px"> <style type="text/css"><![cdata[ .linec { fill:#fff;stroke:#000; } ]]></style> </svg> </div>

css

.movepath { width:"1000px"; height:350px; position:relative; float:left; } .car { width:100px; height:50px; background-color:red; position:absolute; left:0;top:0; }

js

var width=getdocwidth(); $('#canvas').width(width+'px'); $('.movepath').width(width+'px'); var shape = document.createelementns(svgns, "path"); var points = 'm0 10 q -27 10, 95 80 t'+width+' 40'; shape.setattributens(null, "d", points); shape.setattributens(null, "class", "linec"); shape.setattributens(null, "id", 'road'); document.getelementbyid("canvas").appendchild(shape);

created path this. totally confused how move $('#car') through created path ?

please advice

basically need loop (a function triggered in equal time steps, no »for« or »while« loop), therein need point path like:

length = path.gettotallength() * i; point = path.getpointatlength( length );

than:

div.style.left = point.x + 'px'; div.style.top = point.y + 'px';

where i value between 0 , 1 represents progress of animation. in there bit more know , there different ways move div (i.e. css transforms), or values, basically, that's it.

html5 svg jquery-svg svg-animate