事前準備

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

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

.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

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

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

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値からスクロール値を引いていけば、
どんどんパスが描写されていくように見えますね！

完成!

See the Pen Svg Scroll Event by kayukihashimoto (@kfunnytokyo) on CodePen.

*パスの長さは正確ではありません。
今回はパスの長さを超えるように、大まかに設定しています。
正確なパスの長さはgetTotalLength()を使って取得出来ます。
詳しくはこちらから

おわり。

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

事前準備

事前準備 その2

今回使ったSVG属性

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

完成!

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

事前準備その2