CODEWITHSUNDEEP
jqueryanimationsvg
AlexFox
AlexFox

Reputation: 61

SVG animateMotion & JavaScript

I use path and animateMotion. It works well until I try to generate it dynamically using JavaScipt. I use jQuery SVG

I tried to append animation code usind native method:

    $("#scheme_wrapper").svg();
    var svg=box.svg('get');
    svg.add('<rect x="10" y="10" width="20" height="20" fill="red"><animateMotion id="KKK" path="M300,200 a100,100 0 1,0 -100,100 a100,100 0 0,0 100,-100" dur="20s" rotate="auto" repeatCount="indefinite" /></rect>');

I see small red rectangle but animation doesn't start. But if i create svg file with this animation code - rectagle successfully moves. Why? How to create dynamically animateMotion using JavaScript?

Upvotes: 2

Views: 793

Answers (2)

AlexFox
AlexFox

Reputation: 61

I found the solution:

var svg=box.svg('get');
svg.rect(0,0,80,50,{fill:"red",id:"rectObj"});
var motion=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");
motion.setAttribute("dur", "20s");
motion.setAttribute("repeatCount", "indefinite");
motion.setAttribute("path", "M300,200 a100,100 0 1,0 -100,100 a100,100 0 0,0 100,-100");
document.getElementById("rectObj").appendChild(motion);

Upvotes: 3

Robert Longson
Robert Longson

Reputation: 123985

You're using Safari or Chrome right? I'm afraid dynamically added animation doesn't work there. Try Firefox or Opera instead.

Upvotes: 1

Related Questions