答案 0 :(得分:5)
我不知道为什么SVG与它的国家堂兄,画布元素相比,得到了如此糟糕的说唱。令人惊讶的是,在任何认真尝试探索其能力之前,SVG被多次或不适当地解雇了。
请查看this fiddle。
大部分是由路径上移动点的动态评估驱动的,如下所示:
function arrowline( canvas, pathstr, duration, attr, callback )
{
var guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
var total_length = guide_path.getTotalLength( guide_path );
var start_time = new Date().getTime();
var interval_length = 25;
var interval_id = setInterval( function()
{
var elapsed_time = new Date().getTime() - start_time;
var this_length = elapsed_time / duration * total_length;
var subpathstr = guide_path.getSubpath( 0, this_length );
attr.path = subpathstr;
path.animate( attr, interval_length );
if ( elapsed_time >= duration )
{
clearInterval( interval_id );
if ( callback != undefined ) callback();
}
}, interval_length );
return path;
}
我挑战任何人找到一个比这更经济的HTML画布解决方案。如果您打算为此小部件添加任何交互性,请考虑在您的经济评估中SVG中的事件绑定是否容易。
答案 1 :(得分:0)
您可以执行以下操作:http://jsfiddle.net/nDxbK/
编辑:我声明如果示例不是直线上的圆圈,那么这将不起作用,如果您想要进行此类操作,那么SVG就不够了随机运动的东西(但另一方面,画布将是理想的)。 Zero在他的回答中证明我错了,我写的内容被视为对SVG的批评 - 远非我! SVG太棒了。