アニメーションSVGを上下中央揃えにしたい

Question

前提・実現したいこと

■アニメーションSVG上下中央揃えにしたい。

発生している問題

当方WEB系初心者です。
練習のためWebページを作成しています。そのページのトップに
Vivus.jsを使用したアニメーションSVGを真ん中に表示したいのですが、いろいろな方法を試しても上手くいかないのでご教示いただきたくお願いします。

SVGファイルはinkscapeを使用し、テキストをパスに変換しfillを定義せずstrokeのみ表示させた状態で書き出しています。(そうしないとアニメーションが機能しないため)

イメージとしては下記のような形です。
https://template-party.com/template/tp_band1/tp_band1_red/

試したこと

上記のテンプレートと同じサイズでSVGを作りSVGだけそっくり変えてみましたがパスで作られているのとは違うのか駄目でした。

下記サイトを参考にしました。
https://codeday.me/jp/qa/20190203/225367.html
https://coliss.com/articles/build-websites/operation/css/absolute-centering-with-css.html

Comments

[Lhankor_Mhy]

上手くいかないコードをご提示いただけますか？