SVG Path Overlay and another way animation

Question

I have an SVG dashed gray line. What I want to do is overlay, which is on top of the green dotted line SVG and animate the gray color to show the green color. Varieties, like a meter, moving from right to left.

I saw this example of how to create a dash:

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

and I could do it, but my line is already broken.

I ended up with this:

<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/

How can I overlay two hatch lines and animate gray?

Answer 1

You can do this with a clip.

First we add clipPath to SVG.

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

This clip path has the same size as the SVG (width and height 100%), and starts at position x in the right corner of the SVG (100%). Therefore, in the beginning it does not show anything.

Then every 10mS we reduce its x by 1% (i.e. 100% → 99% → 98%, etc.). until it reaches zero.

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

Working demo below:

 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>