vivus.js SVGアニメーションの挙動について

Question

お世話になります。下記svgアニメーションをサイトの冒頭に表示させるように仕込んでいますが、時にアニメーションが表示されない現象が起きています。（ブラウザに特に依存していないよう）

タイミングにより、動かなかったりする場面があります。安定して、動かすには何を解消すればいいでしょうか？

試したこと：単純に下記コードのみでサーバーにアップしてテスト。
(MAC OS10.14.5,win10,iOS でチェック。ブラウザは、FF 68.0.1 (64 ビット),Chromeバージョン: 76.0.3809.100)

<svg version="1.1" id="svg-animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 707.3 417.6" style="enable-background:new 0 0 707.3 417.6;" xml:space="preserve">
<image xmlns:xlink="http://www.w3.org/1999/xlink" width="707.3" height="417.6" xlink:href="img/box-line.svg" mask="url(#clipmask)"></image>
<mask id="clipmask" maskUnits="objectBoundingBox">

<style type="text/css"> .st0{ fill:none; stroke:#FFF; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; stroke-dasharray: 1500; stroke-dashoffset:1500; } </style> <polyline class="st0" points="707.3,414.6 3,414.6 3,3 704.3,3 704.3,411.5 "/> </mask> </svg>

<script src="js/vivus.min.js"></script>
<script>

new Vivus('svg-animation',{type: 'scenario-sync',duration: 300, forceRender: false ,animTimingFunction:Vivus.EASE});
</script>

★box-line.svg （単純な破線のボックス）

<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 707.3 417.6" style="enable-background:new 0 0 707.3 417.6;" xml:space="preserve">

<style type="text/css"> .st0{fill:#C1272D;} </style> <g> <g> <rect x="700.3" y="412.1" class="st0" width="4" height="5"/> </g> <g> <path class="st0" d="M692.3,417.1h-8v-5h8V417.1z M676.4,417.1h-8v-5h8V417.1z M660.4,417.1h-8v-5h8V417.1z M644.5,417.1h-8v-5h8 V417.1z M628.6,417.1h-8v-5h8V417.1z M612.6,417.1h-8v-5h8V417.1z M596.7,417.1h-8v-5h8V417.1z M580.7,417.1h-8v-5h8V417.1z M564.8,417.1h-8v-5h8V417.1z M548.9,417.1h-8v-5h8V417.1z M532.9,417.1h-8v-5h8V417.1z M517,417.1h-8v-5h8V417.1z M501.1,417.1 h-8v-5h8V417.1z M485.1,417.1h-8v-5h8V417.1z M469.2,417.1h-8v-5h8V417.1z M453.2,417.1h-8v-5h8V417.1z M437.3,417.1h-8v-5h8 V417.1z M421.4,417.1h-8v-5h8V417.1z M405.4,417.1h-8v-5h8V417.1z M389.5,417.1h-8v-5h8V417.1z M373.6,417.1h-8v-5h8V417.1z M357.6,417.1h-8v-5h8V417.1z M341.7,417.1h-8v-5h8V417.1z M325.7,417.1h-8v-5h8V417.1z M309.8,417.1h-8v-5h8V417.1z M293.9,417.1 h-8v-5h8V417.1z M277.9,417.1h-8v-5h8V417.1z M262,417.1h-8v-5h8V417.1z M246.1,417.1h-8v-5h8V417.1z M230.1,417.1h-8v-5h8V417.1z M214.2,417.1h-8v-5h8V417.1z M198.2,417.1h-8v-5h8V417.1z M182.3,417.1h-8v-5h8V417.1z M166.4,417.1h-8v-5h8V417.1z M150.4,417.1 h-8v-5h8V417.1z M134.5,417.1h-8v-5h8V417.1z M118.6,417.1h-8v-5h8V417.1z M102.6,417.1h-8v-5h8V417.1z M86.7,417.1h-8v-5h8V417.1 z M70.7,417.1h-8v-5h8V417.1z M54.8,417.1h-8v-5h8V417.1z M38.9,417.1h-8v-5h8V417.1z M22.9,417.1h-8v-5h8V417.1z"/> </g> <g> <polygon class="st0" points="7,417.1 0.5,417.1 0.5,410.6 5.5,410.6 5.5,412.1 7,412.1 "/> </g> <g> <path class="st0" d="M5.5,402.7h-5v-7.9h5V402.7z M5.5,386.8h-5v-7.9h5V386.8z M5.5,371h-5v-7.9h5V371z M5.5,355.2h-5v-7.9h5 V355.2z M5.5,339.4h-5v-7.9h5V339.4z M5.5,323.5h-5v-7.9h5V323.5z M5.5,307.7h-5v-7.9h5V307.7z M5.5,291.9h-5V284h5V291.9z M5.5,276.1h-5v-7.9h5V276.1z M5.5,260.2h-5v-7.9h5V260.2z M5.5,244.4h-5v-7.9h5V244.4z M5.5,228.6h-5v-7.9h5V228.6z M5.5,212.7 h-5v-7.9h5V212.7z M5.5,196.9h-5V189h5V196.9z M5.5,181.1h-5v-7.9h5V181.1z M5.5,165.3h-5v-7.9h5V165.3z M5.5,149.4h-5v-7.9h5 V149.4z M5.5,133.6h-5v-7.9h5V133.6z M5.5,117.8h-5v-7.9h5V117.8z M5.5,102h-5V94h5V102z M5.5,86.1h-5v-7.9h5V86.1z M5.5,70.3h-5 v-7.9h5V70.3z M5.5,54.5h-5v-7.9h5V54.5z M5.5,38.7h-5v-7.9h5V38.7z M5.5,22.8h-5v-7.9h5V22.8z"/> </g> <g> <polygon class="st0" points="5.5,7 0.5,7 0.5,0.5 7,0.5 7,5.5 5.5,5.5 "/> </g> <g> <path class="st0" d="M692.3,5.5h-8v-5h8V5.5z M676.4,5.5h-8v-5h8V5.5z M660.4,5.5h-8v-5h8V5.5z M644.5,5.5h-8v-5h8V5.5z M628.6,5.5h-8v-5h8V5.5z M612.6,5.5h-8v-5h8V5.5z M596.7,5.5h-8v-5h8V5.5z M580.7,5.5h-8v-5h8V5.5z M564.8,5.5h-8v-5h8V5.5z M548.9,5.5h-8v-5h8V5.5z M532.9,5.5h-8v-5h8V5.5z M517,5.5h-8v-5h8V5.5z M501.1,5.5h-8v-5h8V5.5z M485.1,5.5h-8v-5h8V5.5z M469.2,5.5h-8v-5h8V5.5z M453.2,5.5h-8v-5h8V5.5z M437.3,5.5h-8v-5h8V5.5z M421.4,5.5h-8v-5h8V5.5z M405.4,5.5h-8v-5h8V5.5z M389.5,5.5h-8v-5h8V5.5z M373.6,5.5h-8v-5h8V5.5z M357.6,5.5h-8v-5h8V5.5z M341.7,5.5h-8v-5h8V5.5z M325.7,5.5h-8v-5h8V5.5z M309.8,5.5h-8v-5h8V5.5z M293.9,5.5h-8v-5h8V5.5z M277.9,5.5h-8v-5h8V5.5z M262,5.5h-8v-5h8V5.5z M246.1,5.5h-8v-5h8V5.5z M230.1,5.5h-8v-5h8V5.5z M214.2,5.5h-8v-5h8V5.5z M198.2,5.5h-8v-5h8V5.5z M182.3,5.5h-8v-5h8V5.5z M166.4,5.5h-8v-5h8V5.5z M150.4,5.5h-8v-5h8V5.5z M134.5,5.5h-8v-5h8V5.5z M118.6,5.5h-8v-5h8V5.5z M102.6,5.5h-8v-5h8V5.5z M86.7,5.5h-8v-5h8V5.5z M70.7,5.5h-8v-5h8V5.5z M54.8,5.5h-8v-5h8V5.5z M38.9,5.5h-8v-5h8V5.5z M22.9,5.5h-8v-5h8V5.5z"/> </g> <g> <polygon class="st0" points="706.8,7 701.8,7 701.8,5.5 700.3,5.5 700.3,0.5 706.8,0.5 "/> </g> <g> <path class="st0" d="M706.8,399.1h-5v-7.8h5V399.1z M706.8,383.4h-5v-7.8h5V383.4z M706.8,367.7h-5v-7.8h5V367.7z M706.8,352h-5 v-7.8h5V352z M706.8,336.4h-5v-7.8h5V336.4z M706.8,320.7h-5v-7.8h5V320.7z M706.8,305h-5v-7.8h5V305z M706.8,289.3h-5v-7.8h5 V289.3z M706.8,273.6h-5v-7.8h5V273.6z M706.8,257.9h-5v-7.8h5V257.9z M706.8,242.3h-5v-7.8h5V242.3z M706.8,226.6h-5v-7.8h5 V226.6z M706.8,210.9h-5V203h5V210.9z M706.8,195.2h-5v-7.8h5V195.2z M706.8,179.5h-5v-7.8h5V179.5z M706.8,163.8h-5V156h5V163.8z M706.8,148.2h-5v-7.8h5V148.2z M706.8,132.5h-5v-7.8h5V132.5z M706.8,116.8h-5v-7.8h5V116.8z M706.8,101.1h-5v-7.8h5V101.1z M706.8,85.4h-5v-7.8h5V85.4z M706.8,69.7h-5v-7.8h5V69.7z M706.8,54.1h-5v-7.8h5V54.1z M706.8,38.4h-5v-7.8h5V38.4z M706.8,22.7 h-5v-7.8h5V22.7z"/> </g> <g> <rect x="701.8" y="406.9" class="st0" width="5" height="4"/> </g> </g> </svg>

Answer 1

スクリプトを動かすタイミングに問題点があるように思えます。
ドキュメントロード時またはウィンドウ読み込み時のイベントで動かしてみてはどうでしょうか

document.addEventListener("DOMContentLoaded",() => {
  new Vivus();
});

/* or */

window.onload = () => {
  new Vivus();
}