CODEWITHSUNDEEP
javascripthtmlsvgsafarisvg-animate
T J
T J

Reputation: 43156

SVG animation not working with dynamically created elements after page load

I'm creating an svg element and its contents dynamically using javascript and adding it to a div im my web page.

I want to redraw the svg on window resize, however, the elements are being redrawn but the animation attached with them are not starting again even after those elements are recreated!

regardless of whatever i do, the animations are only triggering on page load.

i tried the following on resize event:

  1. emptying the svg, and recreating the elements inside it - the animations work on page load, on recreation its not triggering

  2. adding new animate elements with the same animation again to the exising elements - regardless of multiple animate elments appearing inside svg elements such as rect, they are not being animated!

  3. removing the entire svg! 3:) and re-creating everything from the scratch including svg element and appending to the container div - this seems to work on chrome and firefox, strangely even this is not working on safari!!

How could this not work? its a brand new svg element being added to the DOM, still the animations on them are not working?

consider the following code:

setTimeout(function(){
            var anim = document.createElementNS('http://www.w3.org/2000/svg','animate');
    anim.setAttribute("attributeName", "height");
    anim.setAttribute("from", 0);
    anim.setAttribute("to", 100);
    anim.setAttribute("dur", "9s");
    anim.setAttribute("begin", "0s");
    anim.setAttribute("fill", "freeze");
            //assume i have a rect element in my svg
    rect.appendChild(anim);
        }, 5000);

if the duration is less than the timeout(5 sec) the animation is not visible, if its greater than the time out, some of it is being displayed.

Actually, when does the count down for svg animate elements ( suppose beign= '1', when does this count down to 1 start -

If not on page load, how does safari know that the element was previously there and animation is done and freezed even after removing and re-creating it? O.o

i'm targeting ios devices so support for safari is a must. is there any other way to redraw the svg with animations on resize?

can someone pour some light on this? i'm stuck with this problem... any help or information would be great.. thanks.

Upvotes: 3

Views: 1906

Answers (1)

defghi1977
defghi1977

Reputation: 5349

Perhaps beginElement or beginElementAt method of SVGAnimateElement is usable.

setTimeout(function(){
            var anim = document.createElementNS('http://www.w3.org/2000/svg','animate');
    anim.setAttribute("attributeName", "height");
    anim.setAttribute("from", 0);
    anim.setAttribute("to", 100);
    anim.setAttribute("dur", "9s");
    anim.setAttribute("begin", "0s");
    anim.setAttribute("fill", "freeze");
            //assume i have a rect element in my svg
    rect.appendChild(anim);
    anim.beginElement();
        }, 5000);

Upvotes: 4

Related Questions