Animate Svg Path Via Javascript
I want to animate svg path by button click, but it's not working.
Solution 1:
See http://jsfiddle.net/c5mzn6d0/4/
Add
animate.beginElement();
after you append the animation:
var btn = document.getElementById('btn');
btn.onclick = function () {
var path = document.getElementById('path1');
var animate = document.createElementNS("http://www.w3.org/2000/svg","animate");
animate.setAttribute('attributeName', 'd');
animate.setAttribute('dur', '1s');
animate.setAttribute('fill', 'freeze');
animate.setAttribute('values', 'M 10 10 L 40 20 20 40; M 30 10 L 10 40 40 30');
path.appendChild(animate);
animate.beginElement();
}
Post a Comment for "Animate Svg Path Via Javascript"