SVG Path Overlay y Animate Out Another Path

Tengo un SVG de una línea gris discontinua. Lo que quiero hacer es superponer eso en la parte superior de una línea discontinua verde SVG, y animar el gris para revelar el verde. Sorta como un medidor moviéndose de derecha a izquierda.

Vi este ejemplo de cómo hacer una línea de guiones:

http://jsfiddle.net/ehan4/2/

y pude hacerlo, pero mi línea ya está discontinua.

Terminé haciendo esto:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 666.9 123.8" enable-background="new 0 0 666.9 123.8" xml:space="preserve"> <path opacity="0.4" stroke-width="3" fill="none" stroke="#66CD00" stroke-linecap="round" stroke-miterlimit="5" stroke-dasharray="1,6" d=" M656.2,118.5c0,0-320.4-251-645.9-0.7" /> <path id="top" opacity="0.4" fill="none" stroke="#AEAEAE" stroke-linecap="round" stroke-miterlimit="5" stroke-dasharray="1,6" d=" M656.2,118.5c0,0-320.4-251-645.9-0.7"/> </svg> var path = document.querySelector('#top'); var length = path.getTotalLength(); // Clear any previous transition path.style.transition = path.style.WebkitTransition = 'none'; // Set up the starting positions path.style.strokeDasharray = 1 + ' ' + 6; path.style.strokeDashoffset = length; // Trigger a layout so styles are calculated & the browser // picks up the starting position before animating path.getBoundingClientRect(); // Define our transition path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 20s linear'; // Go! path.style.strokeDashoffset = '0'; 

https://jsfiddle.net/ps5yLyab/

¿Cómo puedo superponer las dos líneas del tablero y animar el gris?

    One Solution collect form web for “SVG Path Overlay y Animate Out Another Path”

    Puedes hacerlo con una ruta de clip.

    Primero agregamos un clipPath al SVG.

     <defs> <clipPath id="myclip"> <rect id="cliprect" x="100%" y="0%" width="100%" height="100%"/> </clipPath> </defs> 

    Esta ruta de clip tiene el mismo tamaño que SVG (ancho y alto, 100%) y comienza con su position x en el extremo derecho de SVG (100%). Entonces, al principio, no está revelando nada.

    Luego, cada 10mS que networkingucimos es x coord en un 1% (es decir, 100% -> 99% -> 98%, etc.). hasta que llegó a cero.

     var cliprect = document.getElementById("cliprect"); var offsetX = 100; var speed = 10; function clipAdjust() { cliprect.setAttribute("x", offsetX+"%"); offsetX -= 1; if (offsetX >= 0) { window.setTimeout(clipAdjust, speed); } } window.setTimeout(clipAdjust, speed); 

    Demostración de trabajo a continuación:

     var path = document.querySelector('#top'); var length = path.getTotalLength(); // Clear any previous transition path.style.transition = path.style.WebkitTransition = 'none'; // Set up the starting positions path.style.strokeDasharray = 1 + ' ' + 6; path.style.strokeDashoffset = length; // Trigger a layout so styles are calculated & the browser // picks up the starting position before animating path.getBoundingClientRect(); // Define our transition path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 20s linear'; // Go! path.style.strokeDashoffset = '0'; var cliprect = document.getElementById("cliprect"); var offsetX = 100; var speed = 10; function clipAdjust() { cliprect.setAttribute("x", offsetX+"%"); offsetX -= 1; if (offsetX >= 0) { window.setTimeout(clipAdjust, speed); } } window.setTimeout(clipAdjust, speed); 
     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 666.9 123.8" enable-background="new 0 0 666.9 123.8" xml:space="preserve"> <defs> <clipPath id="myclip"> <rect id="cliprect" x="100%" y="0%" width="100%" height="100%"/> </clipPath> </defs> <path opacity="0.4" fill="none" stroke="#AEAEAE" stroke-linecap="round" stroke-miterlimit="5" stroke-dasharray="1,6" stroke-width="2" d="M656.2,118.5c0,0-320.4-251-645.9-0.7"/> <g clip-path="url(#myclip)"> <path stroke-width="3" fill="none" stroke="white" stroke-linecap="round" stroke-miterlimit="5" d="M656.2,118.5c0,0-320.4-251-645.9-0.7" /> <path id="top" opacity="0.4" stroke-width="3" fill="none" stroke="#66CD00" stroke-linecap="round" stroke-miterlimit="5" stroke-dasharray="6,6" d="M656.2,118.5c0,0-320.4-251-645.9-0.7" /> </g> </svg> 
    Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.