jQuery DrawSVG：複数あるSVGをスクロールして可視範囲に入ったタイミングでアニメーションさせたい

jQuery DrawSVGというプラグイン(http://leocs.me/jquery-drawsvg/)を使用して、SVGアニメーションを実装しています。
希望の動きとして、１ページ内に複数あるSVGをスクロールして可視範囲に入ったタイミングでアニメーションさせたいです。

参考にしたサイト：https://stand-4u.com/web/javascript/drawsvg.html
（ターゲットが見える位置までスクロールしてから、一度だけsvg アニメーションを実行する方法）

html
1<div class="box">
2<svg class="svg">略</svg>
3</div>
4
5<div class="box">
6<svg class="svg">略</svg>
7</div>
8
9<div class="box">
10<svg class="svg">略</svg>
11</div>
12.
13.
14.

Javascript
1$(function() {	
2	var target = $(".svg").offset().top; //---(1)
3	var windowHeight = $(window).height(); //---(2)
4	var flg = false; //---(3)
5	var scrolltop = 0; //---(4)
6	var startPoint = 0; //---(5)
7
8	//(6)
9	var mySVG = $('.svg').drawsvg({
10	   duration:2000, 
11	   stagger:100,
12	   easing:'swing',
13	   reverse:false
14	});
15
16	//(7)	
17	$(window).on('scroll resize',function(){
18		$(".svg").each(function(){
19			scrolltop = $(window).scrollTop();
20			windowHeight = $(window).height();
21			startPoint = scrolltop + windowHeight - 100;
22			if(startPoint > target){
23				if(flg==false){
24					$(this).drawsvg('animate');
25					flg = true;
26				}
27			}
28		});
29	});
30});

上記scriptだと、1番最初の.svgしかアニメーションしません。（2回目以降、flgがtrueになってるため、if文の条件に当てはまらなくなっている？）

javascript
1$(function() {	
2	var target = $(".svg").offset().top; //---(1)
3	var windowHeight = $(window).height(); //---(2)
4	var flg = false; //---(3)
5	var scrolltop = 0; //---(4)
6	var startPoint = 0; //---(5)
7
8	//(6)
9	var mySVG = $('.svg').drawsvg({
10	   duration:2000, 
11	   stagger:100,
12	   easing:'swing',
13	   reverse:false
14	});
15
16	//(7)	
17	$(window).on('scroll resize',function(){
18		$(".svg").each(function(){
19			scrolltop = $(window).scrollTop();
20			windowHeight = $(window).height();
21			startPoint = scrolltop + windowHeight - 100;
22			if(startPoint > target){
23				$(this).drawsvg('animate');//検証
24
25//				if(flg==false){
26//					$(this).drawsvg('animate');
27//					flg = true;
28//				}
29			}
30		});
31	});
32});

こちらですと、全ての.svgがアニメーションを可視範囲に入ったタイミングで始めますが、スクロールの度にアニメーションをしようとするため、動きがおかしくなってしまいます。

どのようにすればよいか、ご教示くださいますと幸いです。
どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

判定をsvg個別に行えばよいだけ
元の条件式の順番がおかしかったのでついでに修正したのがこちら

HTML
1<div class="box">
2<svg class="svg" id="svg1">略</svg>
3</div>
4
5<div class="box">
6<svg class="svg" id="svg2">略</svg>
7</div>
8
9<div class="box">
10<svg class="svg" id="svg3">略</svg>
11</div>

JavaScript
1var svg_run ={};  // グローバル変数svgを実行したか？ 
2
3$(function() {    
4    var target; //---(1)
5    var windowHeight = $(window).height(); //---(2)
6//    var flg = false; //---(3)削除してね
7    var scrolltop = 0; //---(4)
8    var startPoint = 0; //---(5)
9
10    //(6)
11    var mySVG = $('.svg').drawsvg({
12       duration:2000, 
13       stagger:100,
14       easing:'swing',
15       reverse:false
16    });
17
18    //(7)    
19    $(window).on('scroll resize',function(){
20        $(".svg").each(function(){
21            if(svg_run[$(this).attr('id')] != true){         // svg処理が済んでいないか？
22                scrolltop = $(window).scrollTop();
23                windowHeight = $(window).height();
24                startPoint = scrolltop + windowHeight - 100;
25                target = $(this).offset().top;               //
26                if(startPoint > target){                     // 開始位置に移動したか？
27                    svg_run[$(this).attr('id')] = true;      // ２重に動かないようこの時点でTrueに設定
28                    $(this).drawsvg('animate');
29                }
30            }
31        });
32    });
33});