SVGパスアニメーションの実装

Question

前提

HTMLでサイトを作成しています。
CSSアニメーションの実装が上手くいかず困っています。

実現したいこと

・手書きフォントのSVGパスアニメーション（vivus.js）実装（下記サイト参照）
https://asuiro-web.com/svg-animation-of-handwritten_font/

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

上記サイトの指示通りにやっているのですが全く表示に反映されません。

試したこと

そもそもSVGをコード表示した際に「path」ではなく「polyline」で表示されるため、イラレの使い方に問題があるのかもしれないと思ったのですが、指示通りパスツールで描画しています。
調べていてアニメーションは「path」でないと表示されないと書かれていたので、SVGの出力さえうまくいけばどうにかなると思ったのですが…

https://codepen.io/michaelschofield/pen/LYGrgx
↑で無理やりpathにコンバートしようとしたのですがうまくいきませんでした

補足情報（FW/ツールのバージョンなど）

SVG1.1

Comments

[int32_t]

polyline でも stroke-dashoffset は使えるはずです。

Answer 1

どういったアニメーションを想定しているのかわかりませんが
ポリゴンのフチをマルがぐるぐるまわるアニメサンプルです

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('polygon,polyline').forEach(poly=>{
    const svgNS = poly.ownerSVGElement.namespaceURI;
    const path = document.createElementNS(svgNS,'path');
    const points = poly.getAttribute('points').split(/\s+|,/);
    const x0=points.shift(), y0=points.shift();
    let pathdata = 'M'+x0+','+y0+'L'+points.join(' ');
    if (poly.tagName=='polygon') pathdata+='z';
    path.setAttribute('d',pathdata);
    poly.parentNode.insertBefore(path,poly);
    path.id="target_path";
  });
});
</script>

<svg class="elephant" height="300" width="300" viewBox="0 0 300 300">
  <g transform="scale(3)">
    <polygon points="25.693,17.699 8.763,26.584 0.598,56.484 9.003,76.657   11.764,75.815 11.404,74.615 4.68,56.724 13.686,49.999 14.886,47.598 14.886,51.44 20.53,47.358 23.412,49.579 30.211,82.301   37.537,82.301 41.423,58.404 68.438,62.968 74.084,63.089 81.289,82.301 91.974,82.301 87.892,61.647 94.977,40.513 97.761,57.646   97.321,60.208 98.274,65.746 99.402,59.967 98.24,57.566 96.297,39.313 81.169,23.342 33.4,23.305 32.36,24.025 30.497,22.262 "  fill="yellow" stroke="black" />
    <circle id="move_circle" cx="0" cy="0" r="5" fill="red">
       <animateMotion dur="3s" repeatCount="indefinite">
         <mpath xlink:href="#target_path"></mpath>
       </animateMotion>
　　 </circle>
</g>
</svg>

※chromeはpolygon/polylineをpathにできませんでしたのでjsでpathを引き直しています

追記

線を引くアニメならこんな感じ？

<style>
#target_path {
  fill:none;
  stroke:#000000;
  stroke-width:1;
  stroke-miterlimit:10;
  stroke-dasharray: 661;
  stroke-dashoffset: 661;
  animation: h-path 5s forwards;
}

@keyframes h-path {
    0% {
        stroke-dashoffset: 661;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('polygon,polyline').forEach(poly=>{
    const svgNS = poly.ownerSVGElement.namespaceURI;
    const path = document.createElementNS(svgNS,'path');
    const points = poly.getAttribute('points').split(/\s+|,/);
    const x0=points.shift(), y0=points.shift();
    let pathdata = 'M'+x0+','+y0+'L'+points.join(' ');
    if (poly.tagName=='polygon') pathdata+='z';
    path.setAttribute('d',pathdata);
    poly.parentNode.appendChild(path);
    path.id="target_path";
  });
});
</script>
<svg class="elephant" height="300" width="300" viewBox="0 0 300 300">
  <g transform="scale(3)">
    <polygon points="25.693,17.699 8.763,26.584 0.598,56.484 9.003,76.657   11.764,75.815 11.404,74.615 4.68,56.724 13.686,49.999 14.886,47.598 14.886,51.44 20.53,47.358 23.412,49.579 30.211,82.301   37.537,82.301 41.423,58.404 68.438,62.968 74.084,63.089 81.289,82.301 91.974,82.301 87.892,61.647 94.977,40.513 97.761,57.646   97.321,60.208 98.274,65.746 99.402,59.967 98.24,57.566 96.297,39.313 81.169,23.342 33.4,23.305 32.36,24.025 30.497,22.262 "  fill="yellow" stroke="none" />
</g>
</svg>

※注意：やるアニメによってpathの位置が変わってくるので注意ください