這幾天研究了一下svg這個東西  ， 不知道怎麼整理，就記錄一下程式碼吧。

首先是素材的準備 ，簡單的tu圖形可以使用svg 的程式碼自己畫出來 。但是稍微複雜一些的圖形就很麻煩了，這裡keyi可以使用一些編輯器來輔助做圖，網上有一些 ，我直接用的是AI匯出的svg檔案。

然後就是程式碼：

HTML

<div class="box">

    <img id="img" src="123.png" alt="">
    <svg  class="svg" width="100% " height="200" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">

        <path  class="path" id="path" d="M100,198.7c-34.7,0-69.6-9.4-69.6-30.4c0-16.4,23.9-26.6,46.2-29.1l1.2-0.1L47,89.8c-1-1.8-1.9-3.7-2.8-5.6
	l-0.8-1.6L43.4,82c-2.7-7-4.1-14.3-4.1-21.8c0-33.5,27.2-60.7,60.7-60.7c33.5,0,60.7,27.2,60.7,60.7c0,7.5-1.4,14.8-4.1,21.8
	l-0.4,1.1h0l-0.3,0.6c-0.9,2.1-1.9,4.1-2.9,6L100,177.7l-12.6-20.5l-0.5,0c-20.4,1.7-33.3,7.4-36.7,10.5l-0.6,0.6l0.6,0.6
	c4.4,4.1,21.5,10.7,48.6,10.8l2.4,0l0,0c27-0.2,44.1-6.7,48.6-10.8l0.6-0.6l-0.6-0.6c-2.5-2.2-11.5-6.5-25.5-9.1l10.7-17.1
	c22.3,5,34.6,14.5,34.6,26.8C169.6,189.3,134.7,198.7,100,198.7L100,198.7L100,198.7z M100,27.4c-14.3,0-25.9,11.6-25.9,25.9
	c0,14.3,11.6,25.9,25.9,25.9c14.3,0,25.9-11.6,25.9-25.9C125.9,39.1,114.3,27.4,100,27.4L100,27.4z"/>

    </svg>
</div>
 

 這裡有一點需要注意

 這一塊很重要，實現path標籤的縮放自適應，後面的數值根據圖片的尺寸來填寫！

JS

<script>
    var current_frame = 0;
    var total_frames = 60;
    var path ;
    var length;

        path = document.getElementById('path');
        img = document.getElementById('img');
        l = path.getTotalLength();
        length = l;
        path.style.strokeDasharray = l + 10;
        path.style.strokeDashoffset = l;

    var handle = 0;

    var draw = function() {
        var progress = current_frame/total_frames;
        if (progress > 1) {
            window.cancelAnimationFrame(handle);
            path.style.opacity = 0;
            img.style.opacity = 1;
        } else {
            current_frame++ ;

            path.style.strokeDashoffset = Math.floor(length * (1 - progress));

            handle = window.requestAnimationFrame(draw);
        }
    };
    draw();
</script>
 

這沒啥好說的直接複製就能用，介紹一下屬性吧。

最後再加個文字效果的svg帖子

 path.getTotalLength() ：這個方法用來獲取path 上的長度  

stroke-dasharray ：用於建立xuxi虛線

stroke-dashoffset : 定義一條線，文字或元素距離（相當於基於position：relative；設定left值。只是不像left單純的基於x方向設定， stroke-dashoffset是基於svg路徑設定的）

stroke-dasharray和stroke-dashoffset相結合就可以實現線條的動畫效果（

首先  stroke-dasharray =  path.getTotalLength() 。

然後stroke-dashoffset長度 > stroke-dasharray長度即可。）

然後就沒了。

SVG的一大應用場景就是實現描邊的動畫效果，利用stroke-dasharray和stroke-dashoffset這兩個屬性可以輕易實現，如下所示的動畫效果：

之前也有幾篇文章講過使用SVG和CSS3中的animation來實現這個效果，可以去看看SVG 路徑描邊動畫 (path animation) 實戰應用等等，這次來講講使用Web Animations API這個新的動畫方法來實現。

至於Web Animations API基礎的使用方法可以去這裡看看，這裡就不再說了。

廢話不多說，就來看看上面寫字的動畫效果是如何實現的，效果是直接在codepen上看到的。

程式碼地址。

首先在AI等向量設計軟體中，把文字轉換為輪廓，然後匯出為SVG檔案就可以得到文字的path了，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 40">
    <title>I dwell in possibility</title>
  <g fill="none" stroke="#000">
     <path d="M20.15 22.62c-3.74-3.67-7.94-9.77-5-15 2.5-3.16 5.88 1.35 5 4.2-.66 5.23-2 11.08-6 14.8-2.95 2.62-8.04.02-7-4 1.15-1.88 3.52-.9 5 0"/>
    <path d="M48.15 21.62c-1.27-5.3-9.5-2.8-9 2.1-.4 4.65 7.2 5.37 8 .9l6-18m-4 12c-.22 2.87-2.37 6.7 0 9 3.02.14 4.57-2.8 6-5"/>
    <path d="M58.15 18.62c-2.7 1.97-4.1 6.13-2 9 2.53.45 4.45-1.22 6-3m2-6c-.45 2.87-3.6 6.56-1 9 4.88.6 7.7-4.72 7-9m0 0c-.08 3.47 2.6 6.87 5.95 4.02l.05-.02"/>
    ...
    <path d="M262.15 22.62c2.5-5.4 1.76-3.03.27 1.18-1.98 3.77 3.02 5.1 5.1 2.44 1.56-1.28 2.53-2.97 3.63-4.62m1-3c-2.4 6.64-4.1 13.56-7 20-3.85 3.06-3.5-3.64-1.62-5.38 3.73-4.66 10-5.83 13.62-10.62"/>
  </g>
</svg>

接下里就是用js來實現具體功能了，我們知道要實現這樣的描邊動畫效果，首先要獲取path的長度用來設定stroke-dasharray和stroke-dashoffset的值。然後使用Web Animations API中的animate方法來把stroke-dashoffset的值從它的長度設定為0，就會產生書寫出來的動畫效果。

下面來實現具體的功能，先是一些初始化的設定：

var strokes = [],
paths = document.getElementsByTagName("path"),
j = 0;

for (let i = 0; i < paths.length; i++) {
    strokes[i] = paths[i].getTotalLength();
    paths[i].style.strokeDashoffset = paths[i].getTotalLength();
    paths[i].style.strokeDasharray = paths[i].getTotalLength();
}

先獲取所有的path，並且使用getTotalLength()方法來獲取path的長度，從而設定每一個path的strokeDashoffset和strokeDasharray的值。

然後是使用Web Animations提供的animate方法來動態更新path的strokeDashoffset和strokeDasharray的值。

function strokeLetter(letter, pathDist) {
         letter.animate([
             { strokeDashoffset: pathDist },
             { strokeDashoffset: '0' }
             ], {
        duration: pathDist * 7,
        fill: 'forwards'
         }).onfinish = function() {
       j++;
             strokeLetter(paths[j], paths[j].getTotalLength());
        }
}

通過上面的程式碼可以看出Web Animations方法中的屬性和CSS3中的animation方法中的屬性差不多，相比較起來Web Animations更加的靈活方便，比如提供了回撥的方法等等。

最後呼叫這個方法，整個書寫的動畫就完成了。

strokeLetter(paths[0], strokes[0]);