Vivus reverse selected paths

Question

Is there a way to reverse draw (so actually erase) a chosen path drawn before using Vivus for SVG? Let's say we have a fiddle like this: http://jsfiddle.net/z7x4ovn7/92/

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="keyhole" version="1.1" width="306" height="296" id="svg2">
  <g transform="translate(-162.46995,-477.2863)" id="layer1">
    <path d="m 314,480 l 0,100" stroke="#20552a" id="path2000" stroke-width="2" fill="none"/>
    <path d="m 314.15745,481.69558 c -59.20089,0.53774 -114.80979,36.72219 -137.3125,95.34375 -29.39129,76.56693 8.83932,162.45246 85.40625,191.84375 l 34.03125,-88.6875 c -20.0678,-7.71358 -34.3125,-27.15324 -34.3125,-49.9375 0,-29.54723 23.95277,-53.5 53.5,-53.5 29.54723,0 53.5,23.95277 53.5,53.5 0,22.78426 -14.2447,42.22392 -34.3125,49.9375 l 34.03125,88.6875 c 39.29085,-15.08234 70.3239,-46.1154 85.40625,-85.40625 29.39129,-76.56693 -8.83932,-162.48371 -85.40625,-191.875 -17.94537,-6.88859 -36.40853,-10.07087 -54.53125,-9.90625 z" id="path2830" fill="#40aa54" stroke="#20552a" stroke-width="8" stroke-miterlimit="4"/>
  </g>
</svg>

new Vivus('keyhole', {
    type: 'oneByOne',
    duration: 50
}, function doDone(obj) {
    obj.el.classList.add('finished');
});

After drawing all paths I would like to reverse-draw the path with id path2000 . Would you have any ideas?

Answer 1

The library has a few restrictions that make it circuitous, but the effect can be achieved if you divide the SVG with two inner <svg> tags. This makes them addressable for different animations, and you can play one of them backwards:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="keyhole" version="1.1" width="306" height="296">
  <svg id="part1">
    <path transform="translate(-162.46995,-477.2863)" d="m 314,480 l 0,100" stroke="#20552a" id="path2000" stroke-width="2" fill="none"/>
  </svg>
  <svg id="part2">
    <path transform="translate(-162.46995,-477.2863)" d="m 314.15745,481.69558 c -59.20089,0.53774 -114.80979,36.72219 -137.3125,95.34375 -29.39129,76.56693 8.83932,162.45246 85.40625,191.84375 l 34.03125,-88.6875 c -20.0678,-7.71358 -34.3125,-27.15324 -34.3125,-49.9375 0,-29.54723 23.95277,-53.5 53.5,-53.5 29.54723,0 53.5,23.95277 53.5,53.5 0,22.78426 -14.2447,42.22392 -34.3125,49.9375 l 34.03125,88.6875 c 39.29085,-15.08234 70.3239,-46.1154 85.40625,-85.40625 29.39129,-76.56693 -8.83932,-162.48371 -85.40625,-191.875 -17.94537,-6.88859 -36.40853,-10.07087 -54.53125,-9.90625 z" id="path2830" fill="#40aa54" stroke="#20552a" stroke-width="8" stroke-miterlimit="4"/>
  </svg>
</svg>

// started immediately
var inner = new Vivus('part1', {
    duration: 20
}, function () {
    // start outer animation after inner has been drawn
    outer.play(1);
});

// started later
var outer = new Vivus('part2', {
    duration: 50,
    start: 'manual'
}, function (obj) {
    obj.el.classList.add('finished');
    // reverse inner animation after outer has been drawn
    inner.play(-1);
});