プラグインなしで作るSVGアニメーション（パスに沿って描写されていくアニメーション）

パスに沿って描写されていくSVGアニメーションを
プラグインなしで実装したまとめ。

<img width="2560" alt=" プラグインなしで作るSVGアニメーション（パスに沿って描写されていくアニメーション）" src="https://qiita-image-store.s3.amazonaws.com/0/139029/2aca533c-a22c-26a7-8669-2878592a665f.jpeg">

#事前準備
- SVGデータの作成
- SVGデータをテキストエディタで開く
- htmlに直接貼り付ける
- pathにclass名を付与(今回はitem)

```html:html
<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181.92 69.26">
    <g>
      <path class="item item1" d="M18.67,50.54a13.22,13.22,0,0,0,2.48,6.68q3.39,4,11.6,4a25,25,0,0,0,8-1.06q5.82-2,5.82-7.56a5.57,5.57,0,0,0-2.85-5,31,31,0,0,0-9-3.05L27.61,43q-10.4-2.3-14.29-5-6.59-4.51-6.59-14.1A18.73,18.73,0,0,1,13.18,9.38q6.45-5.79,18.93-5.79Q42.54,3.59,49.9,9T57.62,24.9H44.53a9.33,9.33,0,0,0-5.26-8.36,18,18,0,0,0-8.11-1.64A15.44,15.44,0,0,0,22.55,17,6.71,6.71,0,0,0,19.33,23a5.59,5.59,0,0,0,3.17,5.22q2,1.15,8.66,2.7l11.44,2.7q7.52,1.77,11.27,4.73,5.83,4.6,5.83,13.31A18.7,18.7,0,0,1,52.8,66.44q-6.9,5.9-19.51,5.9-12.87,0-20.25-5.81t-7.37-16Z" transform="translate(-5.42 -3.34)"/>
      <path class="item item2" d="M107.39,5.49h14.15L99.32,70.66H86.45l-22-65.17H79L93.11,55Z" transform="translate(-5.42 -3.34)"/>
      <path class="item item3" d="M173.47,25.83a12.76,12.76,0,0,0-7.56-9.33A18.57,18.57,0,0,0,158.43,15,16.24,16.24,0,0,0,145.5,21q-5.06,5.94-5.06,17.85t5.48,17a18,18,0,0,0,12.47,5,16.17,16.17,0,0,0,11.23-3.93A17,17,0,0,0,175,46.56H159.94V35.69h27.15v35h-9l-1.37-8.14A31.18,31.18,0,0,1,169.62,69a25,25,0,0,1-13.26,3.3q-13,0-21.22-9-8.62-9-8.62-24.66,0-15.82,8.71-25.36t23-9.54q12.42,0,20,6.3a23.43,23.43,0,0,1,8.64,15.72Z" transform="translate(-5.42 -3.34)"/>
    </g>
  </svg>
</body>
```

#今回使ったSVG属性
- fill グラフィックの内部の色
- stroke　アウトラインの色を定義する
- stroke-width　アウトラインの太さ。デフォルトは1
- stroke-linejoin 角の形状miter,round,bevel
- stroke-dasharray　破線の長さ
- stroke-dashoffset　破線の開始位置
 
参考
[SVG Attribute reference](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute)


#transitionで動かす場合

```javascript:javascript
// ページの読み込みが全て完了したらclass付与
$(window).on('load', function(){
  $('.item').addClass('is-active');
});
```


```scss:scss
@mixin item($delay) { // 引数に開始時間を遅らせる変数を入れる。
  fill: transparent;
  stroke: transparent;
  stroke-width: 1;
  stroke-dasharray: 600; // 破線の長さをパスの長さに合わせる。
  stroke-dashoffset: 600; // 開始位置を破線の長さに合わせる。
  &.is-active {
    stroke: #999;
    stroke-dashoffset: 0; // 開始位値を0にする。
    transition: stroke 1s ease-in $delay, stroke-dashoffset 1s ease-in $delay; // transition設定。
  }
}

// pathの数だけ繰り返す。
@for $i from 1 through 3 { 
  .item#{$i} {
    @include item($i*.25s); 　// 開始時間を0.25s遅らせる。
  }
}
```


#animationで動かす場合

javascriptの記述はなし

```scss:scss
@mixin item($delay) { // 引数に開始時間を遅らせる変数を入れる。
  fill: transparent;
  stroke: transparent;
  stroke-width: 1;
  stroke-dasharray: 600; // 破線の長さをパスの長さに合わせる。
  stroke-dashoffset: 600; // 開始位置を破線の長さに合わせる。
  animation: stroke 1s ease-in $delay forwards; // animation追加。
}

// pathの数だけ繰り返す。
@for $i from 1 through 3 {
  .item#{$i} {
    @include item($i*0.25s); // 開始時間を0.25s遅らせる。
  }
}

// animation設定。
@keyframes stroke {
  0% {
  }
  100% {
    stroke: #999;
    stroke-dashoffset: 0;
  }
```

#完成！

<p data-height="265" data-theme-id="0" data-slug-hash="oqGwPz" data-default-tab="html,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="oqGwPz" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/oqGwPz/">oqGwPz</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

*パスの長さは正確ではありません。
今回はパスの長さを超えるように、大まかに設定しています。
正確なパスの長さはgetTotalLength()を使って取得出来ます。
[詳しくはこちらから](https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/getTotalLength)

おわり。