Vivus 反向选择路径答案

【问题标题】：Vivus reverse selected pathsVivus 反向选择路径
【发布时间】：2017-09-01 23:02:40
【问题描述】：

有没有办法在使用 Vivus for 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 的路径。你有什么想法吗？

【问题讨论】：

标签： javascript svg vivus

【解决方案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);
});

【讨论】：