Html 制作一个“动画”；分区；通过SVG路径

我是HTML5、SVG的noob。基本上，我需要通过我创建的SVG路径移动一个html“div”对象

我的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>

js

创建了这样一条路径。我完全不知道如何通过创建的路径移动$（“#car”）

请注意

基本上，您需要一个循环（一个在相同时间步长内触发的函数，因此对于«或»while«循环，没有»），其中您需要从路径中获得一个点，如：

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

比：

---

其中，

i

是一个介于0和1之间的值，表示动画的进度。总而言之，还有更多需要了解的内容，移动div（即css转换）或获取值的方法也有很多种，但基本上就是这样。

感谢您的回复。。这样行吗？var length=$（'#road'）。getTotalLength（）*i；变量点=$（“#道路”）。getPointAtLength（长度）；var length=$（'#road'）[0].getTotalLength（）*i；谢谢你的回复。。。它可以工作，但不会根据曲线倾斜。我的意思是直线移动。。。是否有任何方法可以更改移动div的原点？如果使用css3转换，也可以旋转div。要获得角度，可以使用特定点上曲线的第一个导数。有关曲线解剖的更多信息，请参见此处。这是可能的，但更先进。

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

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

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