1

What is the way to animate inline-SVGs?! I want to do some animations on paths. Like rotate on some event, animateMotion on multiple paths also triggered by some event.

I'll include a link to the Dev-site: http://www.myradon.net. I'm trying to accomplish the following;

When the power-plug is connected (just above "portfolio") to female (now connected in website), thicker dashes will travel from top all the way to bottom of the page (current visualized). I'm thinking path-animation on these dashed-lines (So speed depends on length of the path and should start when the previous one ends). Dashed-lines are a dozen SVGs inserted by jQuery in Ajax-call.

Anybody got some bright ideas how to deal with this? SMIL, Raphael/D3.js (SVGs are already in the DOM)? Edit: By the way I don't care about IE8 and less.

myradon
  • 421
  • 1
  • 4
  • 13

1 Answers1

0

Javascript-driven animations will get you support for all browsers, and it's pretty easy to do with libs such as d3.js or raphaël (there are plenty of examples available online for both libs).

Depending on how much interactivity you need you can use SVG Animation (SMIL) and provide a js fallback such as FakeSMILe (for IE). If the graphic consists mostly of simple animations and not so much interaction this way may make more sense, as it can be easier to edit the graphics with a graphics editor this way.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • Okay! It will be mainly simply animations rotation, glow, animateMotion triggered by some event. I dont care about older browsers. It's going to be personal project so screw them. Is also reasonably easy to interact with inline SVGs with Raphael? I can only find example were you first define a paper object and then add some SVG-shapes to that object. My canvas is already defined, my paths are allready defined. They allready exist in the DOM. – myradon Mar 05 '13 at 20:01
  • I don't think it's going to work easily with Raphaël, but I could be wrong. Most of what I've seen assumes you use Raphaël's API for creating the SVG. D3 on the other hand should work fine, since you can then just select the elements you want and apply transitions on them based on some event. – Erik Dahlström Mar 06 '13 at 12:11
  • Okay. I'm currently banging my head on how to combine these libraries with SMIL. D3.js or Raphael API doesn't show me anything that reassembles animetMotion. I'm also using different SVG's with MQ's because of Responsive and code (SVG with few MQ's) is getting cluttered. – myradon Mar 07 '13 at 12:53