Question

I’m trying to develop a text with “text” tag inside the svg and inside a group
with animation using “animate” tag
when trying to build with a simple webpage, it worked alright
but when I applied the SVG with HTML DOM with the Javascript inside a Timer
the animation just won’t display, but the svg and the text displayed correctly (with no animation)

the animation:

    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);

can someone tell me why the animation didn’t occur? or maybe it just can’t sync with the javascript timer?

Answer 1

This animates correctly with Firefox. If you’re using a Webkit based browser, it seems like you have this issue