Javascriptを使用し、SVGファイルをアニメーションさせたい

Question

JavascriptでSVGファイルのアニメーション設定をしたいのですが上手くいきません。
スクリプトはvivus.jsを使用しています。

文字の枠を縁取った後に文字の塗りがゆっくり現れる様にしたいのですが、現状枠を縁取った後塗りがアニメーションせずに現れます。

この塗りの部分をどうにかしようとして下記の様にして見たのですが「Uncaught TypeError: element.animate is not a function」というエラーが出て上手くいきません。
どうすれば上手くアニメーションしてくれるのでしょうか？

どなたかお分かりになる方、ご教授頂けますと大変ありがたいです。

アニメーションせずに現れる方

new Vivus('title-path', {
    type: 'scenario-sync',
    duration: 20,
    forceRender: false,
    animTimingFunction: Vivus.EASE
    }, function(){
         $('path').css({
             'fill': 'white'
         });
    });

アニメーションさせようとしてエラーになる方

const element = document.getElementsByTagName('path');
new Vivus('title-path', {
    type: 'scenario-sync',
    duration: 20,
    forceRender: false,
    animTimingFunction: Vivus.EASE
    }, function(){
        element.animate({
            opacity: [ 0, 1 ],
            color: [ "#fff", "#fff" ]
          }, 2000);
    });

Answer 1

animate()はjQueryの関数ではないですか? 調べてみたほうがよさそうに思えます。

~~参考URL: ~~
http://semooh.jp/jquery/api/effects/animate/params,+[duration],+[easing],+[callback]/

---

すみません、JavaScriptの仕様としてあるようですね..
https://developer.mozilla.org/ja/docs/Web/API/Element/animate

ただ「実験的な機能」ではあるようです。

---

追記:
「getElementsByTagName」で取得しているため、以下のように記述する必要があるのではないかと思います。

// 配列「element[0]」などで取得
element[0].animate({
  opacity: [ 0, 1 ],
  color: [ "#fff", "#fff" ]
}, 2000);

---

追記:
jQueryを使っているなら、以下のようなつくりでいかがでしょうか?

new Vivus(
  "title-path",
  {
    type: "scenario-sync",
    duration: 20,
    forceRender: false,
    animTimingFunction: Vivus.EASE
  },
  function () {
    // 色は共通なので1箇所で指定。できればCSSに記述。
    $("path").css({
      fill: "white"
    });
    
    // 変化があるopacityだけ、jQueryのanimate()で変化させる
    $("path").animate({
      opacity: 1
    }, 2000);
  }
);

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。
説明不足で申し訳ありません。
JQueryもHTML側では読み込んでいるので使用はできる状態のはずなのですがエラーになっています・・・
記載しているjsファイル自体は読み込み出来ていて、上記記載以外の部分は問題なく動作している状態です。

[new1ro]

[1] jQueryを読み込んでいるなら、jQueryの$('xxx').animate()を使っていいのでは、と思います。
http://semooh.jp/jquery/api/effects/animate/params,+[duration],+[easing],+[callback]/

[2] 「getElementsByTagName」で取得しているため
以下のように記述する必要があるのではないかと思います。
element[0].animate({
opacity: [ 0, 1 ],
color: [ "#fff", "#fff" ]
}, 2000);

[退会済みユーザー]

再度ご回答いただきありがとうございます。
ご指摘いただきました箇所修正いたしましたが、element[0].animateの部分に「Uncaught DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.
at i.callback 」というエラーが出てできませんでした。

[退会済みユーザー]

追記のご回答を頂きありがとうございます。
教えていただいた内容を反映させて見ましたが、エラーは出ていないようなのですが.animateの部分は反映されませんでした。

Answer 2

CSSで変化後を追加、追加したCSSのclassをJavascriptで追加したらできました。

 #title-path{
    fill: none;
    stroke: white;
    stroke-dashoffset: 0;
    stroke-dasharray: 2000;
    stroke-width: 1;
    transition: 2s;
}

#title-path {
    fill: white;
    fill-opacity: 0;
}

#title-path.active {
    fill: white;
    fill-opacity: 1;
}

new Vivus(
    "title-path",
    {
      type: "scenario-sync",
      duration: 17,
      forceRender: false,
      animTimingFunction: Vivus.EASE
    },
    function () {
        target = document.getElementById("title-path");
        target.classList.add("active");
    }
  );