难点在哪儿?

  1. svg路径像莫斯电码一般难以识别,如何写出自己的名字?
  2. 就算名字画出来了如何能让他一笔一划的写出来?

解决:

  1. svg路径像莫斯电码一般难以识别,如何写出自己的名字?

    答: 对于简单的图形我们可以自己用代码画出来,对于比较复杂的图形我们可以用工具画出来!
    网上svg绘图工具:http://editor.method.ac/

    如下图所示:
    svg editor

    高大上!快准很!

    画完之后可以显示源码,将之复制即可使用!是不是很简单

  2. 就算名字画出来了如何能让他一笔一划的写出来?

    答: 要知道,path有两个属性:stroke-dasharray 和 stroke-dashoffset, 这两个属性完美解决问题!

那就来吧?

首先,大家要明白stroke-dasharray和stroke-dashoffset的含义~

stroke-dasharray: 可控制用来描边的点划线的图案范式.
它是一个数列,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。因此,5,3,2等同于5,3,2,5,3,2。

stroke-dashoffset: 指定了dash模式到路径开始的距离.

所以当我们将stroke-dasharray设置为我们所画线段总长度的话,利用stroke-dashoffset就可以控制线段一点一点画出来了,bingo!

代码如下:

<svg id="my" xmlns="http://www.w3.org/2000/svg">
        <path d="m122.5,82c-1,3 -2.11587,5.96384 -3,9c-1.15277,3.95868 -2.09544,8.97734 -3,13c-1.11866,4.97479 -2,10 -2,15c0,8 -2.53873,17.897 -4,27c-1.59288,9.92284 -3,19 -5,29c-2,10 -3,17 -3,25c0,8 0,17 0,25c0,8 0,16 0,23c0,6 0,12 0,18c0,6 -0.32037,11.02582 0,13c0.50654,3.12143 0.5695,4.133 2,8c0.77579,2.09717 1.48626,2.82376 2,5c0.22975,0.97324 0.69255,3.186 2,5c0.8269,1.14728 2,2 3,3c1,1 2.07844,1.78986 5,3c2.06586,0.85571 4,1 7,1c4,0 8.98453,-1.08075 14,-2c5.98309,-1.09662 12.12476,-1.42471 18,-3c8.25252,-2.21268 12.92033,-4.16797 17,-6c4.91257,-2.20605 9.88855,-4.19409 15,-7c5.88045,-3.22806 12.19801,-6.63297 18,-10c6.23695,-3.61945 14.19885,-7.62485 22,-12c8.22827,-4.61472 16.07437,-8.88293 24,-14c6.05817,-3.91136 11.83127,-8.22054 17,-12c5.82092,-4.25638 10,-9 14,-13c5,-5 9,-11 13,-17c4,-6 5.82462,-11.06134 8,-17c1.85226,-5.05659 3.3851,-8.37201 6,-12c1.65381,-2.29454 3.54135,-4.70267 5,-8c1.66803,-3.77065 1.78986,-7.07843 3,-10c0.85571,-2.06586 2,-5 2,-6c0,-2 0,-3 0,-4c0,-1 0.30746,-2.186 -1,-4c-0.8269,-1.14726 -3,-2 -4,-2c-3,0 -6.87857,-1.49345 -10,-2c-3.94836,-0.64073 -9,0 -14,0c-5,0 -10,0 -14,0c-5,0 -9.07181,-0.30876 -14,1c-3.05634,0.81166 -6.01364,1.67007 -10,2c-6.06204,0.50171 -12,3 -16,5c-2,1 -4,3 -5,4c-2,2 -3.34619,3.70546 -5,6c-1.30745,1.814 -3.14429,4.93414 -4,7c-1.21014,2.92157 -2.49345,5.87856 -3,9c-0.32036,1.97418 0,5 0,9c0,4 0,8 0,11c0,3 1,7 2,10c1,3 0.84723,5.04132 2,9c0.88414,3.03616 3,6 5,9c2,3 3.33749,5.31001 5,8c1.487,2.40601 3.19028,4.88152 5,8c1.12234,1.93399 3,4 5,6c2,2 3.41885,4.41885 5,6c1.58115,1.58115 4.186,2.69255 6,4c1.14726,0.8269 2.186,1.69254 4,3c2.29453,1.65381 3.69345,3.4588 5,4c0.92389,0.38269 3,1 5,2c2,1 4.06601,1.87766 6,3c3.11847,1.80972 5.96384,3.11588 9,4c3.95868,1.15277 7.04132,1.84723 11,3c3.03616,0.88412 6.90778,2.49622 11,3c0.99249,0.12219 4.03873,-0.48056 7,0c3.12143,0.50653 5.87857,2.49347 9,3c1.97418,0.32037 5,0 9,0c4,0 8,0 12,0c4,0 7,0 11,0c3,0 6,0 9,0c2,0 4,0 6,0c3,0 7.01498,-0.75565 9,-1c4.09222,-0.50378 7,-2 11,-3c4,-1 8.01498,-1.75565 10,-2c4.09222,-0.50378 7,-2 10,-3c3,-1 5.06601,-1.87766 7,-3c3.11847,-1.80972 4.76108,-3.41589 8,-5c2.84073,-1.38934 5.186,-2.69254 7,-4c2.29453,-1.65381 3.69254,-3.186 5,-5c0.8269,-1.14726 2.41885,-2.41885 4,-4c1.58115,-1.58115 1.83981,-3.01291 2,-4c0.50653,-3.12144 2.34619,-4.70546 4,-7c1.30746,-1.814 2.87766,-4.06601 4,-6c1.80972,-3.11848 4.41589,-4.76108 6,-8c1.38934,-2.84073 2,-5 3,-7c1,-2 2.48627,-4.82375 3,-7c0.22977,-0.97325 1,-5 1,-7c0,-3 0,-5 0,-8c0,-3 0,-6 0,-8c0,-2 0,-5 0,-8c0,-3 -0.67963,-7.02582 -1,-9c-0.50653,-3.12144 -2,-5 -3,-7c-1,-2 -2,-5 -3,-7c-1,-2 -2.34619,-3.70546 -4,-6c-1.30746,-1.814 -1.69254,-3.186 -3,-5c-0.8269,-1.14726 -2,-3 -3,-4c-1,-1 -2.93414,-2.14429 -5,-3c-2.92157,-1.21014 -5.07843,-0.78986 -8,-2c-2.06586,-0.85571 -3.90778,-1.49623 -8,-2c-1.98502,-0.24437 -5.04132,0.15277 -9,-1c-3.03616,-0.88414 -5,-1 -9,-1c-3,0 -5,0 -8,0c-3,0 -5,0 -8,0c-2,0 -4,0 -5,0c-2,0 -5.07843,0.78986 -8,2c-2.06586,0.85571 -4,2 -6,3c-2,1 -4,2 -5,3c-2,2 -3.34619,2.70546 -5,5c-1.30746,1.814 -2,4 -3,6c-1,2 -2,5 -2,6c0,2 0,4 0,6c0,2 0,4 0,7c0,2 0,4 0,6c0,3 0,5 0,7c0,2 1,5 1,6c0,2 -0.66251,4.31001 1,7c0.7435,1.203 0.67963,2.02582 1,4c0.50653,3.12144 1,4 2,6c1,2 1.77023,3.02675 2,4c0.51373,2.17625 2,4 3,6c1,2 2,4 3,6c1,2 2.1731,3.85274 3,5c1.30746,1.814 2.34619,3.70546 4,6c1.30746,1.814 1.69254,3.186 3,5c0.8269,1.14726 1.69254,2.186 3,4c0.8269,1.14726 2.02676,0.77025 3,1c2.17624,0.51375 2.85272,2.1731 4,3c1.814,1.30745 3.02676,1.77025 4,2c2.17624,0.51375 4,1 6,2c2,1 4,2 5,2c1,0 2,0 3,0c1,0 2.02676,-0.22975 3,0c2.17624,0.51375 3,2 4,2c1,0 2,0 3,0c1,0 1.82376,0.48627 4,1c0.97324,0.22977 2,0 3,0c1,0 2,0 3,0c1,0 1.69345,1.4588 3,2c0.92389,0.38269 2,0 3,0c2,0 4,0 6,0c2,0 4,0 6,0c2,0 3,0 4,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 4,0c1,0 3,0 4,0c2,0 3,0 4,0c1,0 2,0 3,0l1,0l1,0" id="svg_3" fill-opacity="null" stroke-width="10" stroke="#000000" fill="none"/>
</svg>
//得到我们所化的线
var path = document.querySelector('#my path');
//获得线段的总长度
var length = path.getTotalLength();
//初始化动画
path.style.transition = path.style.WebkitTransition = 'none';
//给动画设置初始值,也就是将stroke-dasharray置为线段总长,stroke-offset置为总长
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// 获取一个区域,获取相关的样式,让浏览器寻找一个起始点。
path.getBoundingClientRect();
//动起来!
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
path.style.strokeDashoffset = '0';

是不是很简单!

那么问题来了,你家写字就一划啊!?

我的思路如下:

  1. 算出所有线段的总长度,然后计算每条线段占总长度的百分比。
  2. forEach每个path数组,给动画加上setTimeout,间隔时间利用我们算出的百分比计算。

代码如下:

<svg id="name" width="580" height="400" xmlns="http://www.w3.org/2000/svg">
        <path d="m28.5,125c0,1 0,3 0,5c0,3 0,7 0,11c0,4 0,8 0,12c0,4 -0.39415,8.01947 0,12c0.50245,5.0742 0.5695,8.133 2,12c0.77579,2.09717 1.49346,3.87856 2,7c0.16018,0.98709 -0.32037,3.02582 0,5c0.50654,3.12144 1.77025,4.02675 2,5c0.51374,2.17625 0.69255,3.186 2,5c0.8269,1.14726 1.69255,2.186 3,4c0.8269,1.14726 3,3 4,4c2,2 3,3 5,4c2,1 4,2 6,4c1,1 3,2 4,2c1,0 2,0 3,0c1,0 3,0 6,0c3,0 7.01498,-0.75563 9,-1c4.09222,-0.50377 7.01498,-1.75563 9,-2c4.09222,-0.50377 6.08025,-0.31075 9,-1c2.17625,-0.51375 3.02675,-1.77025 4,-2c2.17625,-0.51375 3.186,-0.69255 5,-2c1.14727,-0.8269 1,-2 2,-4c1,-2 2,-4 2,-6c0,-3 1.48626,-6.82375 2,-9c0.4595,-1.9465 0,-4 0,-8c0,-3 0,-7 0,-10c0,-4 0,-8 0,-11c0,-3 0,-5 0,-7c0,-3 0,-5 0,-7c0,-1 0,-3 0,-5c0,-2 0,-3 0,-4c0,-1 0,-2 0,-3c0,-1 0,-2 0,-3c0,-1 0,-2 0,-3l0,-1" id="svg_10" fill-opacity="null" stroke-width="10" stroke="#000000" fill="none"/>
  <path d="m181.5,118c-1,-2 -2,-3 -3,-3c-1,0 -3,0 -4,0c-2,0 -6.0146,-0.29562 -9,0c-5.0742,0.50245 -7.87856,2.49346 -11,3c-1.97418,0.32037 -5.82375,1.48626 -8,2c-0.97325,0.22975 -3,1 -4,2c-1,1 -2,3 -2,4c0,2 -0.49623,3.90779 -1,8c-0.24437,1.98502 0,4 0,7c0,3 0.49623,5.90779 1,10c0.12218,0.99251 0.33749,4.31001 2,7c1.487,2.40601 3,4 5,6c1,1 2.85274,3.1731 4,4c1.814,1.30745 5,2 8,3c3,1 6.15927,1.61064 9,3c3.23892,1.58411 5,3 7,4c2,1 4,2 6,3c2,1 3.186,1.69255 5,3c1.14726,0.8269 2,2 3,3c1,1 2,2 2,3c0,1 0,3 0,4c0,1 0.4595,3.0535 0,5c-0.51375,2.17625 -1.85274,3.1731 -3,4c-1.814,1.30745 -5.04132,1.84723 -9,3c-3.03616,0.88414 -5.03874,1.51945 -8,2c-3.12144,0.50655 -5,2 -6,2c-1,0 -2,0 -3,0c-1,0 -2.07613,0.38269 -3,0c-1.30656,-0.5412 -2,-2 -4,-3c-2,-1 -4.76108,-2.41589 -8,-4c-2.84073,-1.38936 -5,-3 -7,-4l-1,-1" id="svg_11" fill-opacity="null" stroke-width="10" stroke="#000000" fill="none"/>
  <path d="m208.5,145c1,0 2,0 5,0c4,0 8,0 12,0c4,0 9,0 13,0c4,0 7,0 9,0c2,0 3,0 4,0c2,0 4,0 5,0c2,0 3,0 4,0c1,0 1.82376,-0.48625 4,-1c0.97324,-0.22975 3.02676,0.22975 4,0c2.17624,-0.51375 3,-2 4,-2c1,0 2,0 3,0c1,0 3,-1 4,-1c1,0 2.21014,-1.07843 1,-4c-0.85571,-2.06586 -2.71411,-5.21167 -5,-8c-2.68979,-3.28101 -5,-6 -7,-8c-2,-2 -4.19028,-3.88152 -6,-7c-1.12234,-1.934 -3.1731,-3.85273 -4,-5c-1.30746,-1.814 -2.4588,-2.69344 -3,-4c-0.38269,-0.92388 -1,-3 -2,-2c-1,1 -2.14429,1.93414 -3,4c-1.21014,2.92156 -2,6 -2,9c0,3 0,6 0,9c0,3 0,7 0,10c0,3 0,6 0,9c0,3 0,6 0,9c0,3 0,6 0,9c0,3 0,5 0,7c0,3 0,5 0,8c0,2 0,4 0,5c0,2 -0.32036,4.02582 0,6c0.50655,3.12144 0.67964,4.02582 1,6c0.50655,3.12144 1.83981,4.01291 2,5c0.50655,3.12144 0.5405,4.0535 1,6c0.51375,2.17625 1.09789,3.82443 3,5c0.85065,0.52573 3,0 6,0c3,0 6,0 10,-1c4,-1 7.02249,-1.63345 10,-2c4.09222,-0.50377 6,-2 8,-3l1,-1" id="svg_12" fill-opacity="null" stroke-width="10" stroke="#000000" fill="none"/>
  <path d="m354.5,150c0,-1 -1.1731,-3.85274 -2,-5c-1.30746,-1.814 -2.41885,-4.41885 -4,-6c-1.58115,-1.58115 -4.93414,-2.14429 -7,-3c-2.92157,-1.21014 -5.82376,-2.48625 -8,-3c-0.97324,-0.22975 -3,0 -5,0c-2,0 -3,0 -4,0c-2,0 -4.01291,-0.16019 -5,0c-3.12143,0.50655 -4,2 -6,4c-1,1 -3,3 -4,4c-2,2 -3.48627,2.82375 -4,5c-0.4595,1.9465 0,4 0,7c0,3 0,6 0,10c0,4 0.75565,9.01498 1,11c0.50378,4.09221 1.84723,8.04132 3,12c0.88412,3.03616 2.19028,5.88152 4,9c1.12234,1.93399 2.33749,4.31001 4,7c1.487,2.40601 3,4 4,5c1,1 2,1 3,1c1,0 3,0 5,0c3,0 5,0 7,0c2,0 5.06601,-0.87766 7,-2c3.11847,-1.80972 4.70547,-4.34619 7,-6c1.814,-1.30745 4.186,-2.69255 6,-4c2.29453,-1.65381 3,-3 4,-5c1,-2 2.513,-3.59399 4,-6c1.66251,-2.68999 1.78986,-6.07843 3,-9c0.85571,-2.06586 2,-4 2,-5c0,-2 -0.4595,-4.0535 0,-6c0.51373,-2.17625 2,-4 2,-5c0,-1 1,-3 0,-3c-1,0 0,3 0,6c0,3 -0.36655,6.02248 0,9c0.50378,4.09221 2.49347,5.87856 3,9c0.16019,0.98709 0.77023,4.02675 1,5c0.51373,2.17625 2,3 2,4c0,1 0.61731,3.07613 1,4c0.5412,1.30656 2.186,1.69255 4,3c1.14728,0.8269 2,1 3,1c1,0 2,1 3,1c1,0 2,0 3,0l1,0" id="svg_13" fill-opacity="null" stroke-width="10" stroke="#000000" fill="none"/>
  <path d="m459.5,146c-1,-2 -2.93414,-3.14429 -5,-4c-2.92157,-1.21014 -6.07843,-1.78986 -9,-3c-2.06586,-0.85571 -3,-1 -5,-1c-2,0 -4,0 -6,0c-3,0 -5,0 -7,0c-2,0 -5,1 -7,2c-2,1 -4.186,1.69255 -6,3c-1.14728,0.8269 -2.4588,2.69344 -3,4c-0.38269,0.92387 -1,3 -1,4c0,1 0,3 0,6c0,3 -0.39417,6.01947 0,10c0.50244,5.0742 0.88135,7.02521 2,12c0.90457,4.02266 3,7 4,10c1,3 2,5 3,7c1,2 2.69254,4.186 4,6c0.8269,1.14726 2.1731,1.85274 3,3c1.30746,1.814 2.07843,1.78986 5,3c2.06586,0.85571 4.87857,2.49345 8,3c2.96127,0.48055 6,0 10,0c3,0 6,0 8,0c2,0 3,0 4,0l1,-1" id="svg_14" fill-opacity="null" stroke-width="10" stroke="#000000" fill="none"/>
  <path d="m500.5,90c0,1 -1,4 -2,7c-1,3 -1,5 -1,9c0,4 0,7 0,11c0,4 0,9 0,13c0,5 0,10 0,15c0,4 0,8 0,12c0,6 0,11 0,16c0,5 0,8 0,11c0,3 0,5 0,7c0,2 0,5 0,7c0,2 0.4595,3.0535 0,5c-0.51373,2.17625 -1,3 -1,4c0,2 0,3 0,4c0,1 -0.4588,1.69344 -1,3c-0.38269,0.92387 -0.32037,1.97418 0,0c0.50653,-3.12144 1.49756,-5.9258 2,-11c0.29562,-2.9854 0,-7 0,-11c0,-5 0,-9 0,-14c0,-7 0,-14 0,-21c0,-7 0.67963,-11.02582 1,-13c0.50653,-3.12144 0.78986,-4.07843 2,-7c0.85571,-2.06586 1.41885,-4.41885 3,-6c1.58115,-1.58115 3.93414,-2.14429 6,-3c2.92157,-1.21015 6,-2 9,-3c3,-1 5.87854,-3.49346 9,-4c0.98706,-0.16018 3,0 4,0c2,0 3,0 7,1c4,1 8,3 12,5c4,2 7,3 9,4c2,1 3.48627,2.82375 4,5c0.45953,1.9465 0.24438,5.01498 0,7c-0.50378,4.09221 -1.71411,7.21167 -4,10c-2.68976,3.28101 -7.06525,5.90378 -13,10c-7.07971,4.88649 -16.19159,10.87024 -26,14c-8.62683,2.75275 -18.75711,3.98692 -25,5c-0.98709,0.16019 -3,0 -4,0c-1,0 -1.69345,-0.4588 -3,-1c-0.92389,-0.38269 2.01721,0.9335 6,2c7.03235,1.8831 15.12668,4.54831 23,7c8.15765,2.54022 15,6 21,8c6,2 10.31,3.33749 13,5c1.203,0.7435 2.02673,0.77025 3,1c2.17627,0.51375 2.69342,2.4588 4,3c0.92389,0.38269 3.18604,0.69255 5,2c1.14728,0.8269 2,1 3,1l2,0l3,0" id="svg_15" fill-opacity="null" stroke-width="10" stroke="#000000" fill="none"/>
</svg>
    var path = document.querySelectorAll('#name path');
    var totalLength = 0;
    var len = path.length;
    var lenArray = [];
    var singleInterval = [];
    var totalInterval = [];
    for(var i = 0;i < len; i++) {
        var length = path[i].getTotalLength();
        lenArray.push(length);
        totalLength += length;
    }
    for(var i = 0;i < len; i++) {
        singleInterval.push(+(lenArray[i] / totalLength));
        totalInterval[i] = singleInterval.reduce(function(pre, cur, i) {
            return pre + cur;
        });
    }
    path.forEach(function(item, i) {
        var length = item.getTotalLength();
        var interval = totalInterval[i-1] ? totalInterval[i-1] : 0;
        // 清除之前的动作
        item.style.transition = item.style.WebkitTransition = 'none';
        item.style.strokeDasharray = length + ' ' + length;
        item.style.strokeDashoffset = length;
        // 获取一个区域,获取相关的样式,让浏览器寻找一个起始点。
        item.getBoundingClientRect();

        setTimeout(function() {
            item.style.transition = item.style.WebkitTransition = 'stroke-dashoffset ' + len * singleInterval[i] + 's ease-in-out';
            item.style.strokeDashoffset = '0';
        }, len * 1000 * interval);
    });
本章完!