我尝试了以下方法:
<!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 上查过。 .
有人可以告诉我我的错误在哪里吗？
最佳答案
不存在动画元素这样的东西。然而有一个animate大概就是您正在考虑的元素。
关于javascript - Animation.beginElement 不是一个函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30003378/