jQueryのSVG描写で、safariのみ挙動がおかしい

Question

日本語の文字画像(SVG)を、手書き風でSVG描写させているのですが（実際にシャッシャと書かれていくイメージ）、chromeではスムーズに動いてくれるのですが、safariのみかくついて困っています。
jqueryのdrawSVGというプラグインを使っています。
(参考にしたサイト　https://canvas-i.com/coding-draw-svg/ )

具体的には、１文字１文字書かれていくのが理想ですが、１文字目、６文字目、７文字目、１０文字目、のように変な順番で、かつ不完全な文字が描写されるイメージです。そして最後に残りの足りない部分が合わせてパッと現れるという...まさにカクついてるイメージです。
以下コードです。

      <svg class="draw" viewBox="0 0 593.839 235.469" width="100%">
			<defs>

				<!-- 2-a.マスクの指定 -->
				<mask id="mask--logo">

					<!-- 3.描画パスの挿入 -->
          <path class="st0" d="M-3,45C10.718,30.413,27.364,11.077,55,5c11.205-2.464,27.212-5.984,37,3c9.597,8.809,7.819,24.687,7,32
          	c-1.961,17.508-9.919,30.447-30,56c-11.271,14.343-26.275,32.55-45,53"/>
          <path class="st1" d="M150,45c-19.602,12.428-32.269,25.718-29,32c2.91,5.592,20.638,0.93,36-3"/>
          <path class="st2" d="M179,32c-0.667,11.667-2.653,22-2,35"/>
          <path class="st2" d="M210,30c-3.605,23.699-13.053,55.817-39,80c-2.297,2.141-4.636,4.138-7,6"/>
          <path class="st2" d="M232,48l37-18c0,0-24,40-23,50s7,11,7,11l8,3"/>
          <path class="st2" d="M267,60c2.789-2.226,5.915-4.528,9.389-6.813c2.982-1.962,5.87-3.681,8.611-5.187"/>
          <path class="st2" d="M264,77c5.289-3.204,10.961-6.432,17.016-9.614C286.156,64.684,291.162,62.23,296,60"/>
          <path class="st2" d="M312,34c0,0,4,35,10,37s8,2,8,2"/>
          <path class="st2" d="M339,40c2.303,4.654,4.618,9.825,6.805,15.5c2.106,5.467,3.81,10.665,5.195,15.5"/>
          <path class="st2" d="M358,39l35-15c0,0-20,32-17,39s5,3,5,3l32-28c0,0-28,39-25,39s49-24,49-24"/>
          <path class="st2" d="M451,40c6.19,5.734,12.527,12.007,18.905,18.857c3.177,3.412,6.206,6.797,9.095,10.143"/>
          <path class="st2" d="M124,178c0,0,58.224-28.151,71.112-26.576S202,177,202,177l-21,38c0,0-8-9-8-17"/>
          <path class="st2" d="M185,136c-10.766,18.46-21.474,36.954-32.125,55.483C144.547,205.969,136.256,220.475,128,235"/>
          <path class="st2" d="M243,142l-18,47l-3-18l53-20c0,0-11,42-17,48"/>
          <path class="st2" d="M251,170c4.321,0.957,8.725,1.989,13.206,3.101c5.068,1.258,10,2.562,14.794,3.899"/>
          <path class="st2" d="M309,134c0,0-14,19-11,21s10,4,12,3s18-17,18-17h4c0,0-20,27-23,39s-5,21-5,21"/>
          <path class="st2" d="M362,131c-1.893,8.729-3.715,17.699-5.447,26.901c-1.67,8.876-3.183,17.579-4.553,26.099"/>
          <path class="st2" d="M373,142c3.01,0.698,6.086,1.455,9.223,2.278c3.357,0.88,6.616,1.79,9.777,2.722"/>
          <path class="st2" d="M369,163c4.37-0.24,8.812-0.443,13.325-0.604c5.665-0.202,11.225-0.332,16.675-0.396"/>
          <path class="st2" d="M414,126c0,0,25-11,27-10s-28,53-28,53s34-34,39-33s6,24-7,40s-43,44-43,44"/>
          <path class="st2" d="M485,109c0,0,23,8,20,11s-21,25-21,25s20-18,30-4s-21,41-21,41s-5,6-9,0s13-23,16-26s86-43,86-43"/>
          <path class="st2" d="M576,146c0,0-14,15-14,20s0,14,4,14s15-3,16-6s11-9,7-14s-14-7-14-7"/>
				</mask>
			</defs>

			<!-- 2-b.マスクの指定 -->
			<image xlink:href="<?php echo esc_url(get_template_directory_uri()); ?>/img/catchsvg.svg" width="100%" height="100%" mask="url(#mask--logo)"></image>
		</svg>

jQuery(function($){
	//描画のフェードイン
	jQuery('.draw').css({
		'visibility': 'visible',
	});

	// Canvasのを描画走らせる
	setTimeout(function () {
		logo.drawsvg('animate');
	}, 600);

	// DrawSVGアニメーション設定
	var canvas_draw = {
		duration: 150, //ひとつのpathが描き終わる速度
		stagger: 100, //次のpathを書き始めるまでの遅延時間。
		easing: 'swing', //jqueryで使用できるイージングを実装。
		reverse: false, //描く方向の指定。
		callback: function () {
			//処理を記述
		}
	},
		logo = jQuery(".draw").drawsvg(canvas_draw);
});

試したことは、上記jqueryコードの中の

setTimeout(function () {
        logo.drawsvg('animate');
    }, 600);

このsetTimeoutの時間の数値を4000とかにしたら数秒後ではありますがsafariでもスムーズに表示されたので、ロードが遅れてカクツクのかなと思いました。

chromeでは問題ないというのもあり、どう対処していいのか分かりません。
よい解決法やヒントがありましたら、どうかご教授よろしくお願い致します。