SVG 描邊動畫就這麼簡單

在開始講解以前，先來看看效果

svg 描邊屬性 stroke

在 svg 中對圖形（line、polyline、rect、circle、ellipse、polygon）、路徑（path）、文本(text、textPath、tspan)的描邊都須要用到stroke屬性。

stroke 經常使用屬性

• stroke：顏色。

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g>
      <path stroke="red" d="M0 20 l200 0" />
      <path stroke="green" d="M0 40 l200 0" />
      <path stroke="blue" d="M0 60 l200 0" />
    </g>
  </svg>
  複製代碼

  

• stroke-width：寬度。

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g stroke="black">
      <path stroke-width="2" d="M0 20 l200 0" />
      <path stroke-width="6" d="M0 40 l200 0" />
      <path stroke-width="12" d="M0 60 l200 0" />
    </g>
  </svg>
  複製代碼

  

• stroke-linecap：線端點樣式。取值butt、round、square，默認butt。

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g stroke="black" stroke-width="6">
      <path stroke-linecap="butt" d="M10 20 l210 0" />
      <path stroke-linecap="round" d="M10 40 l210 0" />
      <path stroke-linecap="square" d="M10 60 l210 0" />
    </g>
  </svg>
  複製代碼

  

• stroke-opacity：透明度。

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g stroke="black" stroke-width="6">
      <path stroke-opacity="0.2" d="M10 20 l210 0" />
      <path stroke-opacity="0.6" d="M10 40 l210 0" />
      <path stroke-opacity="1" d="M10 60 l210 0" />
    </g>
  </svg>
  複製代碼

  

• stroke-linejoin：轉角處樣式。取值arcs、bevel、miter、round，默認miter。

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300" viewBox="0 0 400 300">
    <g>
      <polyline stroke-linejoin="miter" points="20,100 60,30 100,100" stroke="black" stroke-width="30" fill="none" />
  
      <polyline stroke-linejoin="round" points="20,180 60,110 100,180" stroke="black" stroke-width="30" fill="none" />
  
      <polyline stroke-linejoin="bevel" points="20,260 60,190 100,260" stroke="black" stroke-width="30" fill="none" />
  
    </g>
  </svg>
  複製代碼

  

• stroke-dasharray：定義虛線樣式。取值是一個逗號或者空格分隔的數列。數列的第一個值表示dash大小、第二值表示兩個dash之間空隙大小。如stroke-dasharray:10, 2 表示dash大小十、dash間隙2。若是提供數列是奇數個，則會重複一次造成偶數個。如stroke-dasharray:10等效於stroke-dasharray:10, 10或stroke-dasharray:10, 2, 5等效於stroke-dasharray:10, 2, 5, 10, 2, 5。

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g stroke="black" stroke-width="6">
      <path stroke-dasharray="5,5" d="M10 20 l210 0" />
      <path stroke-dasharray="10,10" d="M10 40 l210 0" />
      <path stroke-dasharray="20,10,5,5,5,10" d="M10 60 l210 0" />
    </g>
  </svg>
  複製代碼

  

  singsong：也就是說 stroke-dasharray 取值數列以兩個數值爲一個單元劃分，每一個單元第一個值表示dash大小，第二值表示兩個dash之間空隙大小。演示實例

  

• stroke-miterlimit：當stroke-linejoin: miter時，對 miter 進行限制。

singsong: 樣式屬性優先級爲 style > css > attribute。

如何讓描邊動起來

stroke-dashoffset

這個屬性用於指定 stroke-dasharray 開始的偏移量。也是本文重點介紹對象，理解該屬性如何工做，就能很好地掌握 svg 描邊動畫。stroke-dashoffset 取值能夠大於 0，也能夠小於 0。演示實例。

• 取值大於 0

  

• 取值小於 0。等效於offset = s - |-offset| % s。其中offset表示正取值，s表示dasharray的總和（如：dasharray: '100 50'，則s: 150）。

  

動畫原理

隨着時間的變化，經過控制 stroke-dashoffset 來控制 stroke-dasharray 開始的偏移量的變化，以到達動畫效果。演示實例。

singsong：一般會將 stroke-dasharray 設置爲路徑總長度。如總長度爲s，stroke-dasharray: s或stroke-dasharray: s s。再將 stroke-dashoffset 取值從 s 變化到 0，就可實現從無到有的描邊動畫。

動畫的實現方式：演示實例

• css

  .path {
    stroke-dasharray: 523.1047973632812;
    stroke-dashoffset: 0;
    animation: dash 2s linear 3s alternate infinite;
  }
  @keyframes dash {
      from {
          stroke-dashoffset: 523.1047973632812;
      }
      to {
          stroke-dashoffset: 0;
      }
  }
  複製代碼

• js。須要使用 SVGGeometryElement.getTotalLength() 方法，獲取路徑的總長度。在 SVG 1.1 中，getTotalLength() 只存在 SVGPathElement 中，而基本圖形是沒有該方法的。不過在 SVG 2.0 中，基本圖形也繼承該方法。如何檢測SVG版本，能夠參考這裏。

Moved pathLength attribute and getTotalLength() and getPointAtLength() methods from SVGPathElement to SVGGeometryElement。————SVG 2 support in Mozilla

const path = document.querySelector('.path');
// 獲取總長度
const totalLength = path.getTotalLength();
// 設置 stroke-dasharray
path.style.strokeDasharray = totalLength;
// 設置 stroke-dashoffset
path.style.strokeDashoffset = totalLength;

let currentFrame = 0;
let totalFrames = 160;
const draw = function() {
    let progress = currentFrame / totalFrames;
    if (progress > 1) {
        window.cancelAnimationFrame(handle);
    } else {
        currentFrame++;
        // 更新 stroke-dashoffset
        path.style.strokeDashoffset = totalLength * (1 - progress);
        handle = window.requestAnimationFrame(draw);
    }
};
draw();
複製代碼

實戰

將 stroke 動畫用於預加載動畫展現

• Demo

  

• 實戰實例

  

工具

• vectr：SVG 在線製做工具——Demo
• INKSCAPE：SVG 製做工具
• SVGOMG: SVG 壓縮工具

相關庫

• vivus
• Lazy Line Painter
• Walkway —— Demo

參考文章

• How SVG Line Animation Works