JavaScriptで手書き風のアニメーションを実現したい

前提・実現したいこと

JavaScriptでSVGの画像を手書き風のアニメーションにする

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

アニメーションが動かない

該当のソースコード

<html>
<head>
  <meta charset="UTF-8">

      <style>
    .cls-1{
      fill:none;
      stroke:#e60012;
      stroke-linecap:round;
      stroke-miterlimit:10;
      stroke-width:17px;
    }
      </style>

      </head>
      <body>
        <div id="splash">
        <div id="splash_logo">
        <svg id="mask" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 781.129 195.329">
            <mask id="clipMask"  maskUnits="objectBoundingBox">
              <path class="cls-1" d="M104.844,233.775s-7.216,28.233-23.78,22.979S41.84,240.077,62.17,219.789,112.5,186.5,151.5,188.5s70,8,66,20-23.532,37.859-56.266,38.43-25.138,0-25.138,0" transform="translate(-37.422 -176.072)"/>
              <path class="cls-1" d="M181.605,184.572S116.5,294.5,103.5,303.5s-47.17,24.072-53.585,7.036-5.162-17.079,4.211-20.557,17.121-4.37,19.748,1.076" transform="translate(-37.422 -176.072)"/>
              <path class="cls-1" d="M148.979,251.428c19.521,52.072,17.571,61.8,29.546,63.438s19.12,9.739,36.047-21.813,19.981-32.8,19.981-32.8S210.5,292.5,214.5,301.5s6.042,22.547,27.521-8.727,25.936-34.354,25.936-34.354S233.5,353.5,213.5,358.5s-43.8,9.332-28.9-8.334,28.006-21.636,49.953-28.651,40.189-10.653,47.568-29.834" transform="translate(-37.422 -176.072)"/>
              <path class="cls-1" d="M315.721,297.638s15.843-38.637,3.811-37.387-13.968.228-24,11.738-15.365,28.84-7.2,35.175,18.448,2.264,23.808-5.2-8.339-11.336-6.99-7.9,1.37,26.508,13.36,16.472" transform="translate(-37.422 -176.072)"/>
              <path class="cls-1" d="M357.767,258.086s-33.841,54.486-29.554,52.45S378.5,255.5,378.5,263.5s-26.137,59.4-19.068,48.2S415.5,247.5,409.5,263.5s-19.851,35.329-15.926,43.664,15.342,3.591,24.634-14.037" transform="translate(-37.422 -176.072)"/>
              <path class="cls-1" d="M471.99,263.414s-15.341-18.086-30.416,0-29.712,49.158-18.893,47.122,12.362,6.2,26.59-14.916S468.49,260.986,467,268.243s-15.793,31.586-12.144,38.921,13.265,8.789,25.457-21.438" transform="translate(-37.422 -176.072)"/>
              <path class="cls-1" d="M584.217,236.606s-26.228,36.406-38.472,18.15S525.5,222.5,540.5,212.5s38-24,69-14,63.34,21.577,76.67,21.289,11.869,5.371,19.6-8.959" transform="translate(-37.422 -176.072)"/>
              <path class="cls-1" d="M659.479,197.476s-7.225-4.04-18.6,19.992-35.079,84.1-51.728,93.068-59.777,25.532-82.213,7.748-27.82-23.273-26.628-39.029,8.454-28.894,18.323-33.324" transform="translate(-37.422 -176.072)"/>
              <path class="cls-1" d="M638.681,283.487s16.266,5.317,26.042-6.835,9.726-25.98-2.748-18.566S633.5,285.5,635.5,293.5s2.851,24.4,14.926,18.2,22.326-15.223,29.7-39.713,14.6-48.532,11.987-30.01-13.367,24.706-2.99,23.613,31.66-9.61,19.019,8.649S685.5,296.5,689.5,303.5s6.086,14.276,21.543-5.862" transform="translate(-37.422 -176.072)"/>
              <path class="cls-1" d="M767.375,263.414S756.5,242.5,737.5,266.5s-27.5,52.2-15.248,45.1,25.652-15.617,37.45-37.358-16.2,29.588-9.7,32.923,13.825,13.443,26.163-16.61,16.731-30.675,16.731-30.675S771.5,295.5,775.5,304.5s17.184,11.264,25.592-6.368L809.5,280.5l-12.154-42.9-2.164,13.654" transform="translate(-37.422 -176.072)"/>
            </mask>

          <image  xmlns:xlink="http://www.w3.org/2000/svg" xlink:href="img/base.svg" width="100%" height="100%" mask="url(#clipmask)"></image>
        </svg>
</div>
</div>

<script src="js/vivus.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
  // new Vivus('move',{
  //   type:'oneByOne',duration:100,forceRender:false,animTimingFunction:Vivus.EASE_OUT})
  //
  var stroke;
  stroke = new Vivus('mask', {//アニメーションをするIDの指定
      start:'manual',//自動再生をせずスタートをマニュアルに
      type: 'scenario-sync',// アニメーションのタイプを設定
      duration: 50,//アニメーションの時間設定。数字が小さくなるほど速い
      forceRender: false,//パスが更新された場合に再レンダリングさせない
      animTimingFunction:Vivus.EASE,//動きの加速減速設定
  }
  );

  $(window).on('load',function(){
      $("#splash").delay(1500).fadeOut('slow');//ローディング画面を1.5秒（1500ms）待機してからフェイドアウト
    $("#splash_logo").delay(1500).fadeOut('slow');//ロゴを1.5秒（1500ms）待機してからフェイドアウト
          stroke.play();//SVGアニメーションの実行
  });

  </script>
  </body>
  </html>

試したこと

SVG画像に問題がないことを確認
コンソール上にエラーなし

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

エディター：Atom
ブラウザ：chrome

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。

"url(#clipmask)"のところをidに合わせて、"url(#clipMask)"にする必要があります。

<image  xmlns:xlink="http://www.w3.org/2000/svg" xlink:href="img/base.svg" width="100%" height="100%" mask="url(#clipMask)"></image>

また、"img/base.svg"の大きさが十分である必要があります。
自分にはうかがい知れませんが、小さい場合にはCSSに以下を追加してください。

image{
  width: 1000px;
  height:1000px;
}

code内にローディング画面やロゴは確認できなかったので、一度コメントアウトしてください。
手書き部分は成功しているはずです。
ローディング画面とロゴは別途ご用意ください。

$(window).on('load',function(){
  //$("#splash").delay(1500).fadeOut('slow');//ローディング画面を1.5秒（1500ms）待機してからフェイドアウト
  //$("#splash_logo").delay(1500).fadeOut('slow');//ロゴを1.5秒（1500ms）待機してからフェイドアウト
  stroke.play();//SVGアニメーションの実行
});

投稿2021/06/06 18:41