Vivus反向選定的路徑

Question

在使用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逆向繪製的路徑。你有什麼想法嗎？

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