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动画的矩形，如果删除用六边形填充屏幕的onload事件，你可以看到它

Answer 1

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

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

这是您考试的fixed version

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

1 个答案: