SVG анимированный градиент вдоль пути

Question

У меня есть следующий svg, который я хотел бы оживить. Мне бы хотелось, чтобы красная часть двигалась вдоль пути до конца (так от верхней правой стороны до левой нижней стороны):

Проблема в том, что, очевидно, совершенно невозможно иметь градиент, следующий по пути. Вот мой код:

<svg id="fil" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 783.53 362">
    <defs>
        <style>
            .cls-3{
                fill: none;
                stroke-miterlimit:10;
                stroke-width:3px;
            }
        </style>
        <linearGradient id="light" x1="100%" y1="100%">
            <stop offset="70%" stop-color="#3E3E3E">
                <!-- <animate attributeName="stop-color" to="#CF4B59" from="#3E3E3E" dur="0.5s" fill="freeze" /> -->
            </stop>
            <stop offset="100%" stop-color="#CF4B59">
                <!-- <animate attributeName="stop-color" from="#CF4B59" to="#3E3E3E" dur="0.5s" fill="freeze" /> -->
            </stop>
         </linearGradient>
    </defs>
    <g id="Calque_2" data-name="Calque 2">
        <g id="Calque_1-2" data-name="Calque 1">
            <g class="cls-2">
                <path class="cls-3" id="base" d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62" transform="translate(-52.32 -8.93)" stroke="url(#light)"/>
            </g>
        </g>
    </g>
</svg>

Я пытался использовать «анимацию», чтобы заставить его двигаться по траектории, но это вертикальный градиент, который применяется и идет сверху вниз, а не градиент, который следует по пути.

У меня были другие идеи, чтобы преодолеть это:

1. Может быть, используя второй путь, который был бы такой же формы, как первый, но с перевернутым градиентом, чтобы я мог заставить его скользить вдоль начальный путь может быть
2. Или я мог бы использовать непрозрачность, чтобы сделать окончательный путь, но я не уверен, что смогу заставить красную часть двигаться таким образом ...

Если у вас есть идеи переместить красную часть сверху вниз влево, это мне очень поможет!

Answer 1

Вопрос

Мне бы хотелось, чтобы красная часть двигалась вдоль пути до конца (так от верхней правой стороны до левой нижней стороны):

Подумайте об использовании анимации заполнения линии с штрих-смещением.
Для ясности я поместил точно такую ​​же кривую ниже, которая будет показывать маршрут заполнения линии цветом
Если это указание траектории движения не является необходимым, просто удалить path id = "trace"

<svg id="fil" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 783.53 362">
    <defs>
        <style>
            .cls-3{
                fill: none;
                stroke-miterlimit:10;
                stroke-width:3px;
				stroke:#E7E7E7;
            }
			#base {
			fill: none;
			stroke:crimson;
			stroke-width:3px;
			stroke-dashoffset:1732;
			stroke-dasharray:1732;
			animation: fillStroke 10s linear forwards;
			}
			
			@keyframes fillStroke {
			to {stroke-dashoffset:0;}
			}
        </style>
         </defs> 
		   <g transform="translate(-352.32 -8.93)">
		      <path id="trace"  class="cls-3"  d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62"  />
		        <g class="cls-2">
			      
				  <path id="base"    d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62" >
				  
				   </path>
            </g>
		</g>	
 </svg>

Опция анимации градиента

Вместо заполнения цветом при увеличении длины кривой, градиент будет выполнять эту функцию

<svg id="fil" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 783.53 362">
    <defs>
        <style>
            .cls-3{
                fill: none;
                stroke-miterlimit:10;
                stroke-width:3px;
				stroke:#E7E7E7;
            }
			#base {
			fill: none;
			stroke:url(#light);
			stroke-width:3px;
			stroke-dashoffset:1732;
			stroke-dasharray:1732;
			animation: fillStroke 10s linear forwards;
			}
			
			@keyframes fillStroke {
			to {stroke-dashoffset:0;}
			}
        </style>
        <linearGradient id="light" x1="100%" y1="100%">
            
            <stop offset="50%" stop-color="#CF4B59">
                 <!-- <animate attributeName="stop-color" from="#CF4B59" to="#3E3E3E" dur="10s" fill="freeze" />  -->
            </stop>
			<stop offset="100%" stop-color="#3E3E3E">
                 <!-- <animate attributeName="stop-color" to="#CF4B59" from="#3E3E3E" dur="10s" fill="freeze" />  -->
            </stop>
        
		 </linearGradient> 
		 </defs> 
		   <g transform="translate(-352.32 -8.93)">
		      <path  class="cls-3"  d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62"  />
		        <g class="cls-2">
			      
				  <path id="base"    d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62" >
				  
				   </path>
            </g>
		</g>	
   
</svg>