vivus.jsでの手書き風SVGアニメーションがスマートフォン、Firefox、IEで動作しない

以下の画像を手書き風アニメーションで実装したいのですが
IEとスマートフォンでの表示ができませんスマートフォンはchorome FireFox Safariどれも不可能でした
PC用ブラウザだとchorome opera で問題なく表示することができました

vivus.js:
https://maxwellito.github.io/vivus/

作成する上で参考にしたサイト
https://www.willstyle.co.jp/blog/1569/

<style type="text/css">
	.st0{
		fill:none;
		stroke:#FFFFFF;
		stroke-width:3;
		stroke-linecap:round;
		stroke-linejoin:round;
		stroke-miterlimit:10;
		stroke-dasharray: 1500;
		stroke-dashoffset:1500;
	}
	.contain {
		width: 500px;
	}
</style>
<div class="contain">
	<svg version="1.1" id="svg-anime" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
		 y="0px" viewBox="0 0 52 24" style="enable-background:new 0 0 52 24;" xml:space="preserve">
		<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="test.png" width="100%" mask="url(#clipmask)"></image>
		<mask id="clipmask" maskUnits="objectBoundingBox">
			<path class="st0" d="M1.5,5.5"/>
			<path class="st0" d="M1.6,5.9h9.2L5.3,1.6l0.2,16.9c0,0,1,2,2,2s2,0,2,0"/>
			<path class="st0" d="M14.5,12.5h11c0,0,0-7-5-7s-7,7-7,7s1,7,5,8s6.9-0.9,6.9-0.9"/>
			<path class="st0" d="M38.3,6.5c0,0-6.8-3-7.8,2s10,4,7,10s-10-1-10-1"/>
			<path class="st0" d="M41.1,5.9h9.2l-5.5-4.3L45,18.9c0,0,3.9,3.1,5.1,1.9"/>
		</mask>
	</svg>
</div>
<script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
<script>
	var st0 = document.querySelectorAll('.st0');
	var anime = function(){
		new Vivus('svg-anime', {type: 'scenario-sync',duration: 20, forceRender: false ,animTimingFunction:Vivus.EASE},function(){
			setTimeout(function(){

				for(var i =0;i < st0.length; i ++)
					st0[i].removeAttribute('style');
				anime();
			},3000)
		});
	}
	anime();
</script>