Анимация «div» по пути SVG

Question

Я noob для HTML5, SVG. В основном мне нужно переместить объект «div» html через путь SVG, который я создал.

Мой HTML выглядит следующим образом

<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); 

Создано путь. Я полностью смущен, как переместить $ ('# автомобиль') через созданный путь?

Пожалуйста, советы

Answer 1

В принципе вам нужен цикл (функция, которая срабатывает в равных шагах по времени, так что нет »на«или», а« петлю), в нем вам нужно, чтобы получить точку из пути, как:

length = path.getTotalLength() * i; 
point = path.getPointAtLength(length); 

чем:

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

где i это значение от 0 до 1, которое представляет ход анимации. В общем, есть немного больше информации, и есть разные способы перемещения div (т. Е. Преобразования css) или получения значений, но в основном, вот и все.