animation.beginElement is not a function?

Question

I tried the following:

<!DOCTYPE html>
<html>
    <head>
        <title>#002</title>
        <meta charset="UTF-8">      
        <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="../../resurces/js/remove_element.js"></script>
        <script>
            $("document").ready(function(){
                document.getElementById("other").addEventListener("click",function(){
                    console.log("fired");
                    var animation = document.createElementNS("http://www.w3.org/2000/svg", "animation");
                    animation.setAttribute("id","anim_1");
                    animation.setAttribute("attributeName","height");
                    animation.setAttribute("attributeType","XML");
                    animation.setAttribute("dur","3.75s");
                    animation.setAttribute("fill","freeze");
                    animation.setAttribute("from","0");
                    animation.setAttribute("to","100");
                    animation.setAttribute("begin","indefinite");
                    animation.setAttribute("end","indefinite");
                    document.getElementById("RectElement").appendChild(animation);
                    console.log(animation);
                    animation.beginElement(); //ref. http://www.w3.org/TR/SVG/animate.html#__smil__ElementTimeControl__beginElement
                    setTimeout(function(){
                        animation.remove();
                        console.log("cleared_animation");
                    },2500);
                });         
            });                     
        </script>
    </head>
    <body>
        <svg width="20cm" height="20cm"  viewBox="0 0 100 100"
             xmlns="http://www.w3.org/2000/svg" version="1.1">
          <rect id="other" x="0.5" y="0.5" width="98" height="98" 
                fill="none" stroke="blue" stroke-width="1" />
          <rect  id="RectElement" x="45" y="100" width="10" height="0"
                fill="rgb(255,255,0)" transform="rotate(180, 50, 100)">         
          </rect>
        </svg>
    </body>
</html>

But Firefox keep telling me that "animation.beginElement is not a function" I used the examples from this answer, this one and the last one. I also looked it up on the w3 documentation.

Can someone tell me where my mistake is ?

score 1 · Accepted Answer · answered May 02 '15 at 20:39

1

There's no such thing as an animation element. There is however an animate element which is presumably what you're thinking of.

answered May 02 '15 at 20:39

Robert Longson

118,664
26
252
242

Wow that is embarrassing ... thank you. – Feirell May 02 '15 at 20:42

score 0 · Answer 2 · answered May 02 '15 at 14:29

0

Change

var animation = document.createElementNS("http://www.w3.org/2000/svg", "animation");

to

var animation = document.createElementNS("http://www.w3.org/2000/svg", "animateMotion");

and it'll work :) (as in here http://jsfiddle.net/2pvSX/1/)

answered May 02 '15 at 14:29

Alex Alksne

528
5
13

This did not solved my problem, It removed the error. But to use animateMotion I would need a path, key Points origin .. and on. And I just want to have the control about a simple animation, that let the object grow. – Feirell May 02 '15 at 15:38
Ah I was too eager in my reply, sorry about that! Now I'm curious though, I'll look into this some more.. – Alex Alksne May 02 '15 at 15:47
thanks, hopfully you find a solution :) – Feirell May 02 '15 at 16:08

animation.beginElement is not a function?

2 Answers2