通过Inkscape导出字体的path路径并通过snap实现素描动画

本博客中的两个例子我已经放到codepen上了，可以打开链接查看效果和代码：

http://codepen.io/fonglezen/pen/gbxGQY

http://codepen.io/fonglezen/pen/QwMqZE

第一步：

首先打开inkscape，使用文字工具在画布中输入你想要得到的文字，比如：

第二步：

在菜单栏汇总找到路径菜单，然后在下拉菜单中选择对象转化为路径，首先得选中一个对象哟~

第三步：

另存为SVG文件，然后使用编辑器打开这个SVG文件，找到文字对应的path

打开文件后，会发现有很多代码。我们需要的代码其实只是path元素部分。

比如上面文字的路径部分：

<path

         id="path3341"

         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:‘Showcard Gothic‘;-inkscape-font-specification:‘Showcard Gothic‘"

         d="m 227.11265,313.7738 q -0.5363,8.44682 -1.47484,30.30128 -0.62569,18.36848 -0.26815,32.40182 -9.78759,7.4189 -21.63101,7.4189 -6.43567,0 -13.80988,-1.47484 -0.17876,-1.83238 -0.80446,-6.48036 -0.40222,-2.50277 -1.1173,-6.8826 1.38546,0.62569 7.06136,1.92177 2.99438,0.49161 5.58652,0.0894 -0.0447,-4.46922 -1.38545,-26.99407 -0.84916,-12.5138 -2.99438,-30.30128 l 30.83759,0 z" />

     …………………………（此处省略部分）

      <path

         id="path3361"

         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:‘Showcard Gothic‘;-inkscape-font-specification:‘Showcard Gothic‘"

         d="m 842.47905,313.7738 q -0.62569,9.02781 -1.743,31.50797 -0.67038,16.5361 -1.1173,38.03303 -5.85467,-4.60329 -17.83217,-13.72049 -5.18429,-3.62007 -15.46349,-10.8602 l -0.44692,23.68685 -14.39088,0 q -0.35754,-9.07251 -1.65361,-34.2342 -1.1173,-20.37962 -2.2793,-34.41296 l 22.43547,0 16.62548,15.73164 q 0,-5.40775 -0.17877,-8.49151 -0.13408,-2.72622 -0.5363,-7.24013 l 16.58079,0 z" />

第四步：

新建一个html文件，或者把路径部分复制到你要添加svg的文件中，我是把这段文字放到一个新的文件中，以演示动画的，所以我新建了一个html5页面，然后把相应的代码放到html5页面的svg标签中。

现在svg部分代码如下（省略部分path）：

<svg id="svg" width="100%" height="500px" xmlns="http://www.w3.org/2000/svg">
    <path
            id="path3341"
            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:‘Showcard Gothic‘;-inkscape-font-specification:‘Showcard Gothic‘"
            d="m 227.11265,313.7738 q -0.5363,8.44682 -1.47484,30.30128 -0.62569,18.36848 -0.26815,32.40182 -9.78759,7.4189 -21.63101,7.4189 -6.43567,0 -13.80988,-1.47484 -0.17876,-1.83238 -0.80446,-6.48036 -0.40222,-2.50277 -1.1173,-6.8826 1.38546,0.62569 7.06136,1.92177 2.99438,0.49161 5.58652,0.0894 -0.0447,-4.46922 -1.38545,-26.99407 -0.84916,-12.5138 -2.99438,-30.30128 l 30.83759,0 z" />
   …………………………（此处省略path）
    <path
            id="path3361"
            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:‘Showcard Gothic‘;-inkscape-font-specification:‘Showcard Gothic‘"
            d="m 842.47905,313.7738 q -0.62569,9.02781 -1.743,31.50797 -0.67038,16.5361 -1.1173,38.03303 -5.85467,-4.60329 -17.83217,-13.72049 -5.18429,-3.62007 -15.46349,-10.8602 l -0.44692,23.68685 -14.39088,0 q -0.35754,-9.07251 -1.65361,-34.2342 -1.1173,-20.37962 -2.2793,-34.41296 l 22.43547,0 16.62548,15.73164 q 0,-5.40775 -0.17877,-8.49151 -0.13408,-2.72622 -0.5363,-7.24013 l 16.58079,0 z" />
</svg>

第五步：

注意看复制过来的path，style里面有很多样式，但是我们已经转为路径了，所以不需要字体的样式，修改所有path的样式如下：

style="stroke:blue; fill:none; stroke-width: 3;"

上面的代码说明我用蓝色描边，然后填充无，描边的粗细为3。

因为样式是一样的，所以把样式写在style中或者css文件中，可以将结构和样式分离，代码更优化：

<style type="text/css" rel="stylesheet">
    path{
        stroke:blue; fill:#000; stroke-width: 3;
    }
</style>

现在页面显示的效果如下：

第六步

现在通过snap.svg库，来创建svg的路径动画。

首先你得下载snap.svg，然后引入这个js文件。

<script type="text/javascript" src="snap.svg-min.js"></script>

相关教程，可以看官网，有一些demo教学的，上手也比较容易。

为了处理方便，我把path的id以p1,p2...p11的方式命名。

第七步：

获取path的个数，然后为每一个path创建动画，使用循环的方式，给每个path添加动画，具体代码如下：

<script type="text/javascript">
    var s = Snap("#svg");
    
    var pathlen = document.getElementById(‘svg‘).getElementsByTagName(‘path‘).length;

    var linearr = {
        linelen:0,
        lineid:null
    };

    for(var i = 1; i <= pathlen;i++){
        var nowid = ‘#p‘+i;
        var newline = linearr;
        newline.lineid = s.select(‘#p‘+i);
        linearr.linelen =  newline.lineid.getTotalLength();
        newline.lineid.attr({
            strokeDasharray:linearr.linelen,
            strokeDashoffset:linearr.linelen
        });

        newline.lineid.animate({strokeDashoffset:0},2e3);
    }


</script>

在浏览器中预览，就可以看到文字的素描效果了。

第八步

上面我们的文字是没有填充的，如果填充了效果会如何呢？

假设我们填充个黄色，把样式修改一下：

path{
    stroke:blue; fill:yellow; stroke-width: 3;
}

在浏览器中预览得到的效果是

动画中：

动画完成后：

看样子还是挺好看的嘛~哈哈哈哈

以上完整代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css" rel="stylesheet">
        path{
            stroke:blue; fill:yellow; stroke-width: 3;
        }
    </style>
</head>
<body>

<svg id="svg" width="100%" height="500px" xmlns="http://www.w3.org/2000/svg">
    <path
            id="p1"
            d="m 227.11265,313.7738 q -0.5363,8.44682 -1.47484,30.30128 -0.62569,18.36848 -0.26815,32.40182 -9.78759,7.4189 -21.63101,7.4189 -6.43567,0 -13.80988,-1.47484 -0.17876,-1.83238 -0.80446,-6.48036 -0.40222,-2.50277 -1.1173,-6.8826 1.38546,0.62569 7.06136,1.92177 2.99438,0.49161 5.58652,0.0894 -0.0447,-4.46922 -1.38545,-26.99407 -0.84916,-12.5138 -2.99438,-30.30128 l 30.83759,0 z" />
    <path
            id="p2"
            d="m 291.37998,313.7738 -1.02792,28.91583 q -0.44692,12.37973 -0.44692,37.45203 -11.44119,4.11168 -23.32931,4.11168 -14.65903,0 -22.30139,-5.85468 -6.48036,-4.96083 -9.16189,-15.46348 -1.56423,-6.03345 -2.94968,-22.07793 -1.34077,-14.8378 -1.65361,-27.08345 l 28.82644,0 q -0.22346,5.89936 -0.5363,19.21763 -0.13408,7.4189 0.0894,21.05001 0.0447,10.36858 1.78769,13.98864 1.83238,3.84353 7.32951,3.84353 1.56423,0 3.48599,-0.89384 0,-9.20659 -0.53631,-29.27337 -0.44692,-10.05574 -1.65361,-27.9326 l 22.07793,0 z" />
    <path
            id="p3"
            d="m 337.59168,341.88517 q -3.30722,-0.75977 -5.00552,-0.75977 -2.10053,0 -3.84353,1.43015 -2.10053,1.74299 -2.10053,4.51391 0,2.14522 3.84353,8.26805 3.84352,6.12283 3.84352,11.26242 0,7.4636 -5.6759,12.24566 -5.40775,4.60329 -13.36296,4.60329 -7.32951,0 -10.8155,-1.02792 -0.40223,-2.05584 -1.38546,-6.70382 -0.62569,-2.50277 -1.74299,-6.65914 4.91614,1.20669 6.61444,1.20669 6.65913,0 6.65913,-5.05021 0,-3.66476 -2.68153,-6.56975 -4.37983,-3.84353 -8.75966,-7.73175 -8.49151,-7.50828 -8.49151,-17.83217 0,-10.77081 8.04458,-16.31264 7.01667,-4.82675 18.68133,-4.82675 6.61444,0 14.8378,1.92176 l 1.34076,28.02199 z" />
    <path
            id="p4"
            d="m 395.55742,313.7738 -1.29607,28.11137 q -1.74299,-0.26815 -5.58652,-0.67038 -2.36868,-0.13408 -7.68705,-0.26816 -0.26815,2.63684 -0.93854,12.73727 -0.49161,9.78758 -1.60891,28.73706 l -21.63101,0 q -0.35754,-9.02782 -1.34077,-28.37952 -0.44692,-6.70383 -0.93853,-13.09481 l -7.06136,0.26816 -6.39098,0.67038 -1.11731,-28.11137 55.59705,0 z" />
    <path
            id="p5"
            d="m 484.13728,313.7738 q -0.75977,10.99427 -2.01115,35.79842 -0.35754,11.79873 -1.25138,32.84874 l -22.793,0 -0.49162,-15.01657 q -0.80446,0.26816 -3.26253,1.29608 -2.90499,1.25138 -4.11168,2.01114 l -2.32399,-5.49713 q -0.71507,-1.78769 -2.36868,-5.05022 l -0.44692,22.2567 -25.16169,0 -1.29607,-32.84874 q -0.40223,-12.82665 -2.01115,-35.79842 l 31.3739,0 -2.10054,42.27878 q 3.26253,0.31285 6.25691,0.17877 1.92176,-0.0447 5.18429,-0.35754 l -2.2793,-42.10001 29.0946,0 z" />
    <path
            id="p6"
            d="m 542.41585,382.42096 -24.44661,0 -1.65361,-5.94406 q -1.02792,0.40223 -5.1396,2.72622 -2.63684,1.69831 -5.85467,4.51391 l -2.54746,-5.40775 q -0.75976,-1.60892 -2.18991,-4.51391 l -2.41338,8.62559 -12.96073,0 q 2.8603,-11.03896 8.84905,-36.42411 3.66476,-16.98302 6.12283,-32.22305 l 26.85999,0 q 1.25138,7.01667 6.8379,32.66997 3.08376,13.40765 8.5362,35.97719 z M 514.2151,367.76193 q -0.75977,-2.36868 -2.68153,-7.68705 -1.162,-2.94968 -3.53068,-8.13398 -1.02792,2.59215 -3.21784,8.49152 -1.20669,3.3966 -2.8603,9.25127 1.34077,0 6.07814,-0.5363 2.86029,-0.40223 6.21221,-1.38546 z" />
    <path
            id="p7"
            d="m 601.63297,313.7738 q -3.70944,10.99427 -11.88811,35.8878 -3.75414,11.70935 -9.6982,32.75936 l -15.55287,0 q -2.99438,-10.18981 -10.01105,-33.29566 -3.9776,-12.78196 -11.79873,-35.3515 l 31.59736,0 q 0.44692,4.24575 2.10053,13.80988 1.11731,5.0949 3.48599,14.03334 1.25138,-4.33514 3.66476,-14.12273 1.1173,-5.27367 2.54745,-13.72049 l 15.55287,0 z" />
    <path
            id="p8"
            d="m 651.10722,313.7738 -1.92177,28.29014 q -1.65361,-0.26816 -7.15074,-0.93854 -3.75414,-0.35754 -8.22336,-0.44692 l -0.67038,8.5362 q 4.91614,0.13408 16.04448,-0.22346 -0.49161,1.65361 -1.56422,6.16752 -0.62569,2.72622 -1.11731,6.3016 -1.29607,-0.31285 -6.48036,-0.80446 -2.41338,-0.13408 -7.15075,-0.0894 l -0.44692,9.96635 q 3.35191,-0.0447 12.33504,-0.58099 1.6983,-0.13408 5.58652,-1.07262 -0.35754,1.38546 -1.65361,6.65914 -0.62569,2.72622 -1.51953,6.88259 l -39.99949,0 -1.29607,-35.03866 q -0.35754,-12.02219 -1.743,-33.6085 l 46.97147,0 z" />
    <path
            id="p9"
            d="m 719.97784,313.7738 -1.83238,28.11137 q -1.65361,-0.26815 -7.01667,-0.75977 -3.21783,-0.13408 -7.59766,-0.17877 l -0.75977,14.39088 q 4.60329,0.0894 14.21211,-0.67038 -0.44692,2.01114 -1.38546,6.61444 -0.49161,2.72622 -1.07261,6.56974 -1.25138,-0.26815 -5.76529,-0.80445 -3.35191,-0.26816 -6.61444,-0.17877 l -0.35754,15.55287 -25.0723,0 -1.38546,-35.03866 q -0.35753,-12.06688 -2.01114,-33.6085 l 46.65861,0 z" />
    <path
            id="p10"
            d="m 783.88759,313.7738 -1.02792,28.91583 q -0.44692,12.37973 -0.44692,37.45203 -11.4412,4.11168 -23.32931,4.11168 -14.65903,0 -22.30139,-5.85468 -6.48036,-4.96083 -9.16189,-15.46348 -1.56423,-6.03345 -2.94969,-22.07793 -1.34076,-14.8378 -1.65361,-27.08345 l 28.82645,0 q -0.22346,5.89936 -0.53631,19.21763 -0.13407,7.4189 0.0894,21.05001 0.0447,10.36858 1.78768,13.98864 1.83238,3.84353 7.32952,3.84353 1.56422,0 3.48599,-0.89384 0,-9.20659 -0.53631,-29.27337 -0.44692,-10.05574 -1.65361,-27.9326 l 22.07793,0 z" />
    <path
            id="p11"
            d="m 842.47905,313.7738 q -0.62569,9.02781 -1.743,31.50797 -0.67038,16.5361 -1.1173,38.03303 -5.85467,-4.60329 -17.83217,-13.72049 -5.18429,-3.62007 -15.46349,-10.8602 l -0.44692,23.68685 -14.39088,0 q -0.35754,-9.07251 -1.65361,-34.2342 -1.1173,-20.37962 -2.2793,-34.41296 l 22.43547,0 16.62548,15.73164 q 0,-5.40775 -0.17877,-8.49151 -0.13408,-2.72622 -0.5363,-7.24013 l 16.58079,0 z" />
</svg>

<script type="text/javascript" src="snap.svg-min.js"></script>
<script type="text/javascript">
    var s = Snap("#svg");

    var pathlen = document.getElementById('svg').getElementsByTagName('path').length;

    var linearr = {
        linelen:0,
        lineid:null
    };

    for(var i = 1; i <= pathlen;i++){
        var nowid = '#p'+i;
        var newline = linearr;
        newline.lineid = s.select('#p'+i);
        linearr.linelen =  newline.lineid.getTotalLength();
        newline.lineid.attr({
            strokeDasharray:linearr.linelen,
            strokeDashoffset:linearr.linelen
        });

        newline.lineid.animate({strokeDashoffset:0},2e3);

    }


</script>
</body>
</html>

第九步：

上面是用了snap来实现的svg路径动画，使用css3，其实也可以做到。

具体步骤不再列出，使用css3实现的完整代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css" rel="stylesheet">
        path{
            stroke:blue; fill:yellow; stroke-width: 3;
            -webkit-animation: runpath 3s ease infinite;
            animation: runpath 3s ease infinite;
        }

        @-webkit-keyframes runpath {
            to{
                stroke-dashoffset:0;
            }
         }
        @keyframes runpath {
            to{
                stroke-dashoffset:0;
            }
        }
    </style>
</head>
<body>

<svg id="svg" width="100%" height="500px" xmlns="http://www.w3.org/2000/svg">
    <path
            id="p1"
            d="m 227.11265,313.7738 q -0.5363,8.44682 -1.47484,30.30128 -0.62569,18.36848 -0.26815,32.40182 -9.78759,7.4189 -21.63101,7.4189 -6.43567,0 -13.80988,-1.47484 -0.17876,-1.83238 -0.80446,-6.48036 -0.40222,-2.50277 -1.1173,-6.8826 1.38546,0.62569 7.06136,1.92177 2.99438,0.49161 5.58652,0.0894 -0.0447,-4.46922 -1.38545,-26.99407 -0.84916,-12.5138 -2.99438,-30.30128 l 30.83759,0 z" />
    <path
            id="p2"
            d="m 291.37998,313.7738 -1.02792,28.91583 q -0.44692,12.37973 -0.44692,37.45203 -11.44119,4.11168 -23.32931,4.11168 -14.65903,0 -22.30139,-5.85468 -6.48036,-4.96083 -9.16189,-15.46348 -1.56423,-6.03345 -2.94968,-22.07793 -1.34077,-14.8378 -1.65361,-27.08345 l 28.82644,0 q -0.22346,5.89936 -0.5363,19.21763 -0.13408,7.4189 0.0894,21.05001 0.0447,10.36858 1.78769,13.98864 1.83238,3.84353 7.32951,3.84353 1.56423,0 3.48599,-0.89384 0,-9.20659 -0.53631,-29.27337 -0.44692,-10.05574 -1.65361,-27.9326 l 22.07793,0 z" />
    <path
            id="p3"
            d="m 337.59168,341.88517 q -3.30722,-0.75977 -5.00552,-0.75977 -2.10053,0 -3.84353,1.43015 -2.10053,1.74299 -2.10053,4.51391 0,2.14522 3.84353,8.26805 3.84352,6.12283 3.84352,11.26242 0,7.4636 -5.6759,12.24566 -5.40775,4.60329 -13.36296,4.60329 -7.32951,0 -10.8155,-1.02792 -0.40223,-2.05584 -1.38546,-6.70382 -0.62569,-2.50277 -1.74299,-6.65914 4.91614,1.20669 6.61444,1.20669 6.65913,0 6.65913,-5.05021 0,-3.66476 -2.68153,-6.56975 -4.37983,-3.84353 -8.75966,-7.73175 -8.49151,-7.50828 -8.49151,-17.83217 0,-10.77081 8.04458,-16.31264 7.01667,-4.82675 18.68133,-4.82675 6.61444,0 14.8378,1.92176 l 1.34076,28.02199 z" />
    <path
            id="p4"
            d="m 395.55742,313.7738 -1.29607,28.11137 q -1.74299,-0.26815 -5.58652,-0.67038 -2.36868,-0.13408 -7.68705,-0.26816 -0.26815,2.63684 -0.93854,12.73727 -0.49161,9.78758 -1.60891,28.73706 l -21.63101,0 q -0.35754,-9.02782 -1.34077,-28.37952 -0.44692,-6.70383 -0.93853,-13.09481 l -7.06136,0.26816 -6.39098,0.67038 -1.11731,-28.11137 55.59705,0 z" />
    <path
            id="p5"
            d="m 484.13728,313.7738 q -0.75977,10.99427 -2.01115,35.79842 -0.35754,11.79873 -1.25138,32.84874 l -22.793,0 -0.49162,-15.01657 q -0.80446,0.26816 -3.26253,1.29608 -2.90499,1.25138 -4.11168,2.01114 l -2.32399,-5.49713 q -0.71507,-1.78769 -2.36868,-5.05022 l -0.44692,22.2567 -25.16169,0 -1.29607,-32.84874 q -0.40223,-12.82665 -2.01115,-35.79842 l 31.3739,0 -2.10054,42.27878 q 3.26253,0.31285 6.25691,0.17877 1.92176,-0.0447 5.18429,-0.35754 l -2.2793,-42.10001 29.0946,0 z" />
    <path
            id="p6"
            d="m 542.41585,382.42096 -24.44661,0 -1.65361,-5.94406 q -1.02792,0.40223 -5.1396,2.72622 -2.63684,1.69831 -5.85467,4.51391 l -2.54746,-5.40775 q -0.75976,-1.60892 -2.18991,-4.51391 l -2.41338,8.62559 -12.96073,0 q 2.8603,-11.03896 8.84905,-36.42411 3.66476,-16.98302 6.12283,-32.22305 l 26.85999,0 q 1.25138,7.01667 6.8379,32.66997 3.08376,13.40765 8.5362,35.97719 z M 514.2151,367.76193 q -0.75977,-2.36868 -2.68153,-7.68705 -1.162,-2.94968 -3.53068,-8.13398 -1.02792,2.59215 -3.21784,8.49152 -1.20669,3.3966 -2.8603,9.25127 1.34077,0 6.07814,-0.5363 2.86029,-0.40223 6.21221,-1.38546 z" />
    <path
            id="p7"
            d="m 601.63297,313.7738 q -3.70944,10.99427 -11.88811,35.8878 -3.75414,11.70935 -9.6982,32.75936 l -15.55287,0 q -2.99438,-10.18981 -10.01105,-33.29566 -3.9776,-12.78196 -11.79873,-35.3515 l 31.59736,0 q 0.44692,4.24575 2.10053,13.80988 1.11731,5.0949 3.48599,14.03334 1.25138,-4.33514 3.66476,-14.12273 1.1173,-5.27367 2.54745,-13.72049 l 15.55287,0 z" />
    <path
            id="p8"
            d="m 651.10722,313.7738 -1.92177,28.29014 q -1.65361,-0.26816 -7.15074,-0.93854 -3.75414,-0.35754 -8.22336,-0.44692 l -0.67038,8.5362 q 4.91614,0.13408 16.04448,-0.22346 -0.49161,1.65361 -1.56422,6.16752 -0.62569,2.72622 -1.11731,6.3016 -1.29607,-0.31285 -6.48036,-0.80446 -2.41338,-0.13408 -7.15075,-0.0894 l -0.44692,9.96635 q 3.35191,-0.0447 12.33504,-0.58099 1.6983,-0.13408 5.58652,-1.07262 -0.35754,1.38546 -1.65361,6.65914 -0.62569,2.72622 -1.51953,6.88259 l -39.99949,0 -1.29607,-35.03866 q -0.35754,-12.02219 -1.743,-33.6085 l 46.97147,0 z" />
    <path
            id="p9"
            d="m 719.97784,313.7738 -1.83238,28.11137 q -1.65361,-0.26815 -7.01667,-0.75977 -3.21783,-0.13408 -7.59766,-0.17877 l -0.75977,14.39088 q 4.60329,0.0894 14.21211,-0.67038 -0.44692,2.01114 -1.38546,6.61444 -0.49161,2.72622 -1.07261,6.56974 -1.25138,-0.26815 -5.76529,-0.80445 -3.35191,-0.26816 -6.61444,-0.17877 l -0.35754,15.55287 -25.0723,0 -1.38546,-35.03866 q -0.35753,-12.06688 -2.01114,-33.6085 l 46.65861,0 z" />
    <path
            id="p10"
            d="m 783.88759,313.7738 -1.02792,28.91583 q -0.44692,12.37973 -0.44692,37.45203 -11.4412,4.11168 -23.32931,4.11168 -14.65903,0 -22.30139,-5.85468 -6.48036,-4.96083 -9.16189,-15.46348 -1.56423,-6.03345 -2.94969,-22.07793 -1.34076,-14.8378 -1.65361,-27.08345 l 28.82645,0 q -0.22346,5.89936 -0.53631,19.21763 -0.13407,7.4189 0.0894,21.05001 0.0447,10.36858 1.78768,13.98864 1.83238,3.84353 7.32952,3.84353 1.56422,0 3.48599,-0.89384 0,-9.20659 -0.53631,-29.27337 -0.44692,-10.05574 -1.65361,-27.9326 l 22.07793,0 z" />
    <path
            id="p11"
            d="m 842.47905,313.7738 q -0.62569,9.02781 -1.743,31.50797 -0.67038,16.5361 -1.1173,38.03303 -5.85467,-4.60329 -17.83217,-13.72049 -5.18429,-3.62007 -15.46349,-10.8602 l -0.44692,23.68685 -14.39088,0 q -0.35754,-9.07251 -1.65361,-34.2342 -1.1173,-20.37962 -2.2793,-34.41296 l 22.43547,0 16.62548,15.73164 q 0,-5.40775 -0.17877,-8.49151 -0.13408,-2.72622 -0.5363,-7.24013 l 16.58079,0 z" />
</svg>

<script type="text/javascript">
    
    var pathlen = document.getElementById('svg').getElementsByTagName('path').length;
    var linearr = {
        linelen:0,
        lineid:null
    };

    for(var i = 1; i <= pathlen;i++){
        var nowid = 'p'+i;
        var newline = linearr;
        newline.lineid = document.getElementById(nowid);
        linearr.linelen =  newline.lineid.getTotalLength();
        newline.lineid.style.strokeDasharray = newline.lineid.style.strokeDashoffset = linearr.linelen;
    }


</script>
</body>
</html>

（备注：图片上传不了，所以部分要展示的效果图没有上传成功，自己复制代码预览也是ok的。）