通过SVG路径动画“div”

我是HTML5，SVG的noob。基本上我需要通过我创建的SVG路径移动一个html“div”对象。通过SVG路径动画“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>

CSS

.movepath { 
width:"1000px"; 
height:350px; 
position:relative; 
float:left; 
} 

.car { 
width:100px; 
height:50px; 
background-color:red; 
position:absolute; 
left:0;top:0; 
}

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

创建这样的路径。我完全困惑如何通过创建的路径移动$（'＃car'）？

请指点

来源

2013-02-12 ramesh

基本上你需要一个循环（即在相同的时间步触发的功能，所以没有»对«或»而«循环），其中你需要从像路径点：

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转换）或获取值，但基本上就是这样。

来源

2013-02-12 06:00:47 philipp

感谢您的回复..这是好吗？ var length = $（'＃road'）。getTotalLength（）* i; var point = $（'＃road'）。getPointAtLength（length）; – ramesh 2013-02-12 06:12:56

var length = $（'＃road'）[0] .getTotalLength（）* i; – philipp 2013-02-12 06:36:33

感谢您的回复......它可以工作，但不会根据曲线倾斜。我的意思是直线移动......是否有任何方法来改变移动div的起源？ – ramesh 2013-02-13 06:32:04

通过SVG路径动画“div”

回答

相关问题