プラグインなしで作るSVGアニメーション その2

以前、パスに沿って描写されていくSVGアニメーションを、
プラグインなしで実装しました。
[プラグインなしで作るSVGアニメーション その1]
(https://qiita.com/kfunnytokyo/items/3102196d2355f575f91e)

今度はスクロールで描写するようにしてみます!
<p data-height="265" data-theme-id="0" data-slug-hash="LdeLGq" data-default-tab="html,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="Svg Scroll Event" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/LdeLGq/">Svg Scroll Event</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>

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

```html:html
<body>
  <div class="content">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181.92 69.26" class="svg">
      <g>
        <path class="item" 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" d="M107.39,5.49h14.15L99.32,70.66H86.45l-22-65.17H79L93.11,55Z" transform="translate(-5.42 -3.34)"/>
        <path class="item" 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>
  </div>
</body>
``` 

#事前準備 その2

パスの太さや長さ、破線の開始位置を指定します。

```css:css
.item {
  fill: transparent;
  stroke: #999;
  stroke-width: 1;
  stroke-miterlimit:10;
  stroke-dasharray: 600; // 破線の長さをパスの長さに合わせる。
  stroke-dashoffset: 600; // 開始位置を破線の長さに合わせる。
}
```

#今回使った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)

#スクロールで描写する処理

準備が出来たら、
スクロールでパスを描写する処理を追加します。

```javascript:javascript
$(function(){
  var $target = $('.item');
  
  $(window).on('scroll', function(){
    var scroll = $(window).scrollTop(),
        dashoffset = 600; //　stroke-dasharrayと同じ値にする
    if(scroll < dashoffset) {
      $target.css({
        'stroke-dashoffset': dashoffset - scroll
      });
    };
  });
});
```

パスは、dashoffsetで指定した破線の開始位置によって、
表示される範囲が決まるので、
最初に設定したstroke-dasharrayと同じ値にすればパスは表示されず、
値を0にすればパスは全て表示されます。

この仕組みを使って、
スクロールのたびにdashoffset値からスクロール値を引いていけば、
どんどんパスが描写されていくように見えますね！

#完成!
<p data-height="265" data-theme-id="0" data-slug-hash="LdeLGq" data-default-tab="html,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="Svg Scroll Event" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/LdeLGq/">Svg Scroll Event</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)

おわり。