SVG Raphael jQuery 构建路径/轨迹答案

【问题标题】：SVG Raphael jQuery Build path/trailSVG Raphael jQuery 构建路径/轨迹
【发布时间】：2012-06-27 23:18:02
【问题描述】：

如果我有一个像example 这样的动画圆圈，有没有办法可以在画布上留下一个永久的轨迹，1px 纯白色？

我尝试过动态构建路径，但无法使其正常工作。

提前感谢，任何帮助将不胜感激

【问题讨论】：

标签： javascript jquery svg raphael

【解决方案1】：

我不知道为什么 SVG 与它的乡下表亲 canvas 元素相比，名声如此糟糕。令人惊讶的是，在真正尝试探索其功能之前，有多少次 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 我也经历过对 SVG 的过度仇恨/无知。它被低估了。
很好的例子，我喜欢 SVG！

【解决方案2】：

你可以这样做：http://jsfiddle.net/nDxbK/

编辑：我说过，如果示例不是直线移动的圆，这将不起作用，如果你想做这种类型的 SVG 是不够的随机运动的东西（但另一方面，画布是理想的）。 Zero 在他的回答中证明我错了，我写的内容被视为对 SVG 的批评——远离我！ SVG 很棒。

【讨论】：

我不认为“它行不通，所以你应该尝试其他方法”真正构成一个答案，尤其是当断言不正确时。
好吧，你的小提琴摇摆不定，你赢了！我并不是要贬低 SVG，但我的意思是，对于 SVG，路径越长越复杂，你的 SVG 图就会越复杂，你很快就会达到极限。但是，使用画布方法，您可以永远继续下去（您只需绘制一个新片段并进行迭代）。
很抱歉在门口这么苛刻，Clafou。你当然是对的——肯定有 SVG 不能去的地方。但我一直对它可以做什么以及使用 Raphael 如此轻松地感到惊讶。只是想让它得到应有的回报！