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

Question

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

这是我的六边形class

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 函数除外。

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 动画标签，但动画似乎不起作用。

PS：另外为了证明如果不动态应用 smil 也能工作，我创建了一个带有 smil 动画的矩形，如果你删除用六边形填充屏幕的 onload 事件你可以看到它

Answer 1

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

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

这是你的fixed version测试

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

why doesn't SMIL animation work when I add it dynamically using HTML dom

javascript

xhtml

svg

smil