svg animation應用之-描邊效果

stroke是比較重要的svg屬性分支

• stroke-width 表示描邊的粗細
• stroke-linejoin 表示描邊轉角的表現方式 miter, round, bevel, inherit

• stroke-dasharray 表示虛線描邊
• stroke-dashoffset 表示虛線的起始偏移

主角是stroke-dasharray&stroke-dashoffset
效果詳解：張鑫旭.純CSS實現帥氣的SVG路徑描邊動畫效果

直接上代碼

path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

1000沒有什麼特殊含義，只是足夠大

illustrator變換路徑，置換svg起始點

用於描邊時更換方向

另外用transform時會致使z-index失效，因此佈局時須要注意。