javascript - วางทับเส้นทาง SVG และเคลื่อนไหวออกเส้นทางอื่น

ฉันมีไฟล์ SVG ของเส้นประสีเทา สิ่งที่ฉันต้องการทำคือวางมันทับบนเส้นประสีเขียวใน SVG แล้วทำให้เส้นสีเทาค่อย ๆ หายไปเพื่อเผยเส้นสีเขียวออกมา คล้ายกับมาตรวัดที่เคลื่อนจากขวาไปซ้าย

ฉันเห็นตัวอย่างนี้เกี่ยวกับวิธีการทำเส้นประ:

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

และสามารถทำได้ แต่เส้นของฉันถูกขีดแล้ว

สุดท้ายฉันก็ทำแบบนี้:

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

ฉันจะทับเส้นประทั้งสองเส้นและทำให้สีเทาค่อยๆ หายไปอย่างไรได้บ้าง?

คำตอบ #1

คุณสามารถทำได้ด้วยเส้นทางคลิป

ก่อนอื่นเราจะเพิ่ม clipPath ให้กับ SVG

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

เส้นทางการตัดคลิปนี้มีขนาดเท่ากับ SVG (ความกว้างและความสูง 100%) และเริ่มต้นด้วยตำแหน่ง x ของมันที่ด้านขวาสุดของ SVG (100%) ดังนั้นในตอนเริ่มต้นจะไม่มีการเปิดเผยอะไรเลย

จากนั้นทุก ๆ 10 มิลลิวินาที เราจะลดพิกัด x ของมันลง 1% (เช่น 100% -> 99% -> 98% ฯลฯ) จนกระทั่งมันถึงศูนย์

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

ตัวอย่างการทำงานด้านล่าง:

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>