Vivus反向选择路径

Question

在使用Vivus进行SVG之前，是否有一种方法可以反向绘制(实际上是擦除)所绘制的路径？假设我们有一个像这样的小提琴：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');
});

在绘制完所有路径后，我想用id path2000反向绘制路径。你有什么想法吗？

Answer 1

该库有一些限制，使其迂回，但如果将SVG与两个内部<svg>标记分开，则可以实现这种效果。这使得它们可以为不同的动画寻址，并且您可以向后播放其中的一个：

<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);
});