1

I am trying to make a tool for my website which traces over Japanese characters, showing the stroke order etc.. something like this: http://www.chinesehideout.com/tools/strokeorder.php?c=5pel

I have made a bunch of SVG files in inkscape, which are made up of just curves, one for each stroke of the character. I have then imported these into Raphael using the raphael-svg-import: https://github.com/wout/raphael-svg-import

The SVGs are displaying perfectly, however I want to animate them.

My question is: Is there a way to take each path from the SVG in turn in Raphael, and then animate/stroke them? If so..how??

If you need any more info please say! Thanks

EDIT: Perhaps I should clarify, when I say stroke I mean progressively draw the line, starting from the first point and ending at the last. At the moment it draws all paths simultaneously and draws the whole of each path at once.

Duane Allman
  • 531
  • 2
  • 6
  • 20

1 Answers1

0

The technique people use in svg for doing this is outlined in this answer. It's probably possible to adapt that to Raphaël, though the Raphaël documentation doesn't list stroke-dashoffset.

Raphaël has a method Element.getSubpath(from, to) that can be used to get only part of a path, that should probably also be an option.

Community
  • 1
  • 1
Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139