javascript - svg 内のテキストは、アニメーションを表示しません

Question

シンプルなWebページでビルドしようとすると、「animate」タグを使用して、svg内およびアニメーション付きのグループ内で「text」タグを使用してテキストを開発しようとしていますが、問題なく動作しましたが、HTML DOMを使用してSVGをタイマー内の Javascript ではアニメーションは表示されませんが、svg とテキストは正しく表示されます (アニメーションなし)。

アニメーション:

    var Animate;
    Animate = document.createElementNS("http://www.w3.org/2000/svg", "animate");
    Animate.setAttribute("attributeName", "x");
    Animate.setAttribute("from", 500);
    Animate.setAttribute("to", 35);
    Animate.setAttribute("dur","1s");
    Animate.setAttribute("fill", "freeze");

    var SVG=document.createElementNS("http://www.w3.org/2000/svg", "svg");
    SVG.style.zIndex = 1;
    SVG.style.position = "absolute";

    var Group = document.createElementNS("http://www.w3.org/2000/svg", "g");
    Group.setAttribute("id","Effect1");

    var Component=document.createElementNS("http://www.w3.org/2000/svg", "text");
    Component.setAttribute("fill", "rgb(30,100,245)");
    Component.setAttribute("font-family", "Arial");
    Component.setAttribute("font-size", 20);
    Component.setAttribute("style", "dominant-baseline:hanging");


    var txt = document.createTextNode("Complete Trial");
    Component.appendChild(txt);

    Component.appendChild(Animate);
    Group.appendChild(Component);

    SVG.appendChild(Graph);
    document.body.appendChild(SVG);

アニメーションが発生しなかった理由を誰か教えてもらえますか? それとも、javascript タイマーと同期できないのでしょうか?