jquery - 如何使用 SVG 绘制路径？

Question

我想为下面的草书文本制作动画，从左到右。

可以在 slaveryfootprint.org 网站上找到我试图实现的愿望示例。在下面的链接中选择一个电子项目，并观看电缆动画； http://slaveryfootprint.org/survey/#gadgets

我不熟悉 SVG 和 Raphaël js 等 SVG 库，所以我不确定从哪里开始。我四处搜索，但没有找到教程。

编辑:找到下面的第一个标签，从 illustrator 中保存，描绘了 d 第一个字符:

<g>
<path fill="none" stroke="#8C3939" stroke-linecap="round" d="M216.615,297.73c9.509,10.697,24.563-12.282,18.444-15.658
    c-6.074-3.351-10.125,5.753-10.125,5.753s-4.297,8.542,2.08,13.137c8.42,6.673,15.817-3.188,15.947-3.43"/>
</g>

Answer 1

如果你有这条路，你几乎可以做任何事情。另一种选择是将路径交给 javascript 中的增量路径扩展器。这是我通常使用的代码(我已将其作为其他答案的一部分发布，它并不完全是独一无二的，但这个化身是我的):

function drawpath( canvas, pathstr, duration, attr, callback )
{
    var guide_path;
    if ( typeof( pathstr ) == "string" )
        guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
    else
        guide_path = pathstr;
    var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
    var total_length = guide_path.getTotalLength( guide_path );
    var last_point = guide_path.getPointAtLength( 0 );
    var start_time = new Date().getTime();
    var interval_length = 50;
    var result = path;        

    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();
             guide_path.remove();
        }                                       
    }, interval_length );  
    return result;
}

然后，您需要将文本的路径输入到此函数中。理想情况下，我会一次处理一个字母——复杂的路径似乎在 Firefox 中陷入困境，尽管 Chrome 似乎可以很好地处理它们。

这是一个 mock-up在我的网站上。