当我使用HTML dom动态添加动画时，为什么SMIL动画不起作用

Question

我有一个可以动态创建svg六边形（多边形）的文件，我已将每个六边形作为对象实例进行引用，以便稍后引用它们。

这是我的六角形课

function Hexagon(cx,cy,side,id){
    //console.log('hexagon');

    this.cx=cx;
    this.cy=cy;
    this.side=side;
    this.id=id;

    this.isBtn=false;


};

Hexagon.prototype.makeHex =makeHex; //You set the prototype, but don't actually execute the function
Hexagon.prototype.setBtn=setBtn;
Hexagon.prototype.shine=shine;

对象中的大多数原型功能均按预期工作，但发光功能正常。

shine方法向参考六边形添加（至少尝试添加）SMIL动画，这是该方法

function shine(){
    var hex=document.getElementById(this.id)

    var smil=document.createElement('animate');
    smil.setAttribute('attributeName','fill');
    smil.setAttribute('to','#332299');
    smil.setAttribute('dur','2s');
    smil.setAttribute('begin',this.id+'.mouseover')

    hex.appendChild(smil);

}   

现在添加了html节点，但smil动画似乎不起作用。

https://jsfiddle.net/Snedden27/d6qbLzjv/

如果您检查第二个橙色六边形正下方的六边形，它确实包含smil animate标签，但动画似乎不起作用。

PS：也要演示smil是否可以动态应用，我已经创建了一个带有smil动画的rect，如果删除了将六边形填充到屏幕上的onload事件，则可以看到它

Answer 1

您无法通过createElement创建任何SVG元素（包括动画），需要使用createElementNS并将SVG命名空间作为第一个参数传递，例如

var smil=document.createElementNS('http://www.w3.org/2000/svg', 'animate');

这是测试的固定版本