animation.beginElement 不是函数吗？ [关闭]答案

【问题标题】：animation.beginElement is not a function? [closed]animation.beginElement 不是函数吗？ [关闭]
【发布时间】：2015-07-12 06:13:56
【问题描述】：

我尝试了以下方法：

<!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>

但 Firefox 一直告诉我“animation.beginElement 不是函数”，我使用了来自this answer、this one 和the last one 的示例。我也在w3 documentation上查到了。

谁能告诉我我的错误在哪里？

【问题讨论】：

标签： javascript jquery svg

【解决方案1】：

没有动画元素这样的东西。然而，有一个 animate 元素大概就是您所想的。

【讨论】：

哇，好尴尬……谢谢。

【解决方案2】：

改变

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

到

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

它会起作用的:)（就像这里的http://jsfiddle.net/2pvSX/1/）

【讨论】：

这并没有解决我的问题，它消除了错误。但要使用 animateMotion，我需要一条路径、关键点原点……等等。我只想控制一个简单的动画，让对象成长。
啊，我太急于回复了，抱歉！不过现在我很好奇，我会再调查一下..
谢谢，希望你能找到解决方案:)