アコーディオンメニュー内の位置取得

前提・実現したいこと

HTMLの構築で悩んでいます。

ボタンをクリックすると下方向にアコーディオンメニューが開かれて、
メニューの中に縦に5個のsvg形式の画像を配置し、
svg形式の画像が画面の中央付近に来たらアニメーションをする、
というコンテンツを作成しようとしております。

svgの描画には、drawsvg.js様を使用しております。
https://stand-4u.com/web/javascript/drawsvg.html

下記にコードを記載します。
ご助言をいただければ大変幸いでございます。
不足の情報がありましたら、お手数ですがご連絡いただけますと幸いです。
よろしくお願いいたします。

発生している問題・エラーメッセージ

アコーディオンメニューの作成、svgの配置、アニメーションまではうまく行ったのですが、
現在、アコーディオンメニューをクリックした場合にすぐにアニメーションが始まってしまい、画面中央に来たらそれぞれがアニメーションを行う、という仕組みをうまく作る事ができておりません。

・アコーディオンメニューで閉じてしまっていて、トップから該当の画像までの座標が上手く取れないことと、
・クリックした後に中央でアニメーションを行う、というコードが組めていない事
この辺りが問題点ではないかと考えております。

該当のソースコード

・使用しているjquery.drawsvg.jsはデフォルトのままです。

《html(一部)》
<div class="accordion1">
	<p class="ac1">ボタン</p>
	<div class="inner">
	<div class="button__box clearfix">
		<div class="button1 clearfix" href="#" data-delighter>
			<div class="delighter__box">
				<svg version="1.1" class="svg1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 433.588 406.077" xml:space="preserve"><path transform="matrix(0.7071 -0.7071 0.7071 0.7071 -79.1859 188.9117)" class="stc_10 swyblsSr_0" d="M2.595999999999975,190.042A185.848,185.847 0,1,1 374.29200000000003,190.042A185.848,185.847 0,1,1 2.595999999999975,190.042"></path></svg>			</div>
		</div>
		<div class="button2 clearfix" href="#" data-delighter>
			<div class="delighter__box">
				<svg version="1.1" class="svg1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 433.588 406.077" xml:space="preserve"><path transform="matrix(0.7071 -0.7071 0.7071 0.7071 -79.1859 188.9117)" class="stc_10 swyblsSr_0" d="M2.595999999999975,190.042A185.848,185.847 0,1,1 374.29200000000003,190.042A185.848,185.847 0,1,1 2.595999999999975,190.042"></path></svg>			</div>
		</div>
               <div class="button3〜5 clearfix" href="#" data-delighter>上記と同じコンテンツが残り3つ続きます</div>
	</div>
	</div>
</div>				

《アコーディオンメニュー用JS》
<script>
$(function(){
	$('.accordion1 .ac1').click(function(){
		$(this).next('div').slideToggle();
	});
});
</script>

《drawsvg.js》
<script>
$(function(){
var scrolltop = 10;
  var startPoint = 1800;
  var startPoint2 = 1800;
  var windowHeight = $(window).height();
  var target = $(".svg1").offset().top ;
  var target2 = $(".svg2").offset().top;
  var flg = false;
  var flg2 = false;
  var mySVG = $('.svg1').drawsvg({
      duration:1500,
      stagger:1500,
      easing:'swing',
      reverse:false
  });
  var mySVG2 = $('.svg2').drawsvg({
      duration:1500,
      stagger:1500,
      easing:'swing',
      reverse:false
  });
  $('.ac1').on('click', function(){
      scrolltop = $(window).scrollTop();
      windowHeight = $(window).height();
      startPoint = scrolltop + windowHeight - 300;
      if(startPoint > target){
          if(flg==false){
            flg = true;
            mySVG.drawsvg('animate');
          }
      }
      startPoint2 = scrolltop + windowHeight - 420;
      if(startPoint2 > target2){
          if(flg2==false){
            flg2 = true;
            mySVG2.drawsvg('animate');
          }
      }
  });
});
</script>