如何使用SVG绘制路径？

Question

如何使用SVG绘制路径？

3

我希望能够使下面的草书文本从左到右进行动画化。 enter image description here

我想要实现的一个例子可以在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>

- Cam

3个回答

3

如果您将草书文本作为一笔画完成，就可以通过使用stroke-dashoffset + stroke-dasharray属性轻松地对其进行动画处理。此技术的示例可在此处看到。

解决方案是为路径设置一个dasharray，其中一个dash与路径长度相同，另一个dash-gap也与路径长度相同（通过调用路径元素上的getTotalLength()方法可以在运行时轻松找到此长度）。然后，您可以通过动画stroke-dashoffset属性来推动破折号。

该技术也应该适用于raphaël和其他svg框架。请注意，示例显示了预先确定值的svg动画。

- Erik Dahlström

谢谢，Erik！我一直在使用从Illustrator中“保存为SVG”的坐标进行操作。你知道是否有其他自动化这个过程的方法吗？ - Cam

你需要更具体地说明自动化应该做什么。 - Erik Dahlström

嗨，Erik，我想要将Illustrator导出的SVG信息翻译成Raphaël这样的框架可以理解和动画化的内容。当我将信息粘贴到你提供的示例中时，它停止了动画，我知道需要进行调整，也许是注册和缩放有问题？我会添加上面草书文本的信息。 - Cam

0

一个很好的起点：如何在HTML 5中使用可缩放矢量图形（SVG）

- waraker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin Nielsen · Accepted Answer

如果您拥有路径，几乎可以做任何事情。另一个选择是将路径交给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似乎可以很好地处理它们。

这是我网站上的模拟。