Kanimaji

Visit the project page on GitHub.


 

To activate the animation on the 4th stroke it is sufficient to do (you can test in the Javascript console):
svg = $(document.getElementById('mysvg').getSVGDocument());
svg.find('[data-stroke="4"]').addClass('animate brush current');
(we use jQuery for convenience, but it is not necessary), see the code below for information on the classes added.
To get the number of strokes you can just do
num_strokes = svg.find('[data-num-strokes]').data('num-strokes');
And the selector for the elements relative to the x-th strokes (or the 0-th dummy stroke) is just '[data-stroke="x"]'.
The default duration of the 4-th stroke is obtained as:
duration = svg.find('[data-stroke="4"][data-duration]').data("duration");
The code activating the animation of the x-th stroke using the settings is just:
/* 
    Clears everything, sets the stroke-th stroke to drawn/drawing,
    and returns the time the animation will last (if any).
*/
function animate_stroke(stroke) {
    var svg, cls, stroke, els, selector, factor, duration, new_duration;

    svg = $(document.getElementById('mysvg').getSVGDocument());

    /* cleanup all classes and durations, if necessary */
    svg.find('[data-stroke]')
        .removeClass('animate current brush backward')
        .css("animation-duration", '');

    /*
        Build class list from settings:
            "current"  - for marking last drawn/drawing stroke,
                         so that subsequent strokes will be blank.
            "animate"  - for animating the stroke.
            "backward" - for making the animation backward.
            "brush"    - for showing the brush (the fatty drawing circle).
    */
    cls = 'current';
    if($('#animate').is(":checked"))
        cls += ' animate';
    if($('#backward').is(":checked"))
        cls += ' backward';
    if($('#brush').is(":checked"))
        cls += ' brush';

    /*
        hack, trigger reflow to force animation restart, not necessary unless
        animating again the same stroke, and want the animation to be restarted.
    */
    svg.find('svg')[0].offsetWidth;

    /* add classes to animating elaments */
    selector = '[data-stroke="' + stroke + '"]';
    els = svg.find(selector).addClass(cls);

    /* set custom speed, if selected */
    duration = svg.find(selector+'[data-duration]').data("duration");
    if($('#set_speed').is(":checked")) {
        duration *= Math.exp(-$('#speed').slider("value") * 2.0/100);
        els.css("animation-duration", duration+'s');
    }
    return duration;
}