Как анимировать заполнение SVG-пути в JavaScript вместо HTML

Question

Я хочу знать, как можно анимировать SVG-путь с помощью JavaScript вместо HTML. На данный момент я нашел несколько статей переполнения, касающихся анимации с помощью javascript, и нашел много в jQuery с изменением атрибутов в javascript.

Найденные ссылки: Заполнение цветного SVG-пути анимацией Анимация SVG-пути с помощью javascript

Кто-нибудь может знать, как я могу применить методы к указанному ниже пути, так как он отлично работает с HTML, но я хотел бы контролировать продолжительностьанимация.

			<svg width="300" height="300">
        <defs>
    <linearGradient id="left-to-right">
      <stop offset="0" stop-color="#ff0000">
        <animate dur="2s" attributeName="offset" opacity= 0.1 fill="freeze" from="0" to="1" />
      </stop>
      <stop offset="0" stop-color="#fff" stop-opacity= "0.1">
        <animate dur="2s" attributeName="offset" opacity= 0.1 fill="freeze" from="0" to="1" />
      </stop>
    </linearGradient>
  </defs>
         <path id="myPath"
					d="M 280 210 Q 237 144 180 140 Q 120 144 80 210 L 280 210 "
					stroke="black" fill="url(#left-to-right)" />
      </svg>
      

Дело в том, что javascript просто не работает

$(function(){
  
    $(this).animate(
      {
        textIndent: 1,
      }, {
        duration: 3000,
	step: function ( now, fx ) {
                var from = 0,
                	  to = 700,
                    r = from + to * ( now - fx.start ) / ( fx.end - fx.start );
                
                $("#left-to-right").attr( "from", 0);
                $("#left-to-right").attr( "from", 1);
			  },
        complete: function () {
          $("#myPath").attr("fill", "url(#left-to-right)");
        }
      }
    );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="300" height="300">
        <defs>
    <linearGradient id="left-to-right">
      <stop offset="0" stop-color="#ff0000">
        <animate dur="2s" attributeName="offset" opacity= 0.1 fill="freeze" from="0" to="1" />
      </stop>
    </linearGradient>
  </defs>
         <path id="myPath"
					d="M 280 210 Q 237 144 180 140 Q 120 144 80 210 L 280 210 "
					stroke="black" fill="url(#left-to-right)" />
      </svg>

Как мне теперь изменить javascript, fx и атрибуты, чтобы анимация работала так же, как с текущим HTML?

Answer 1

Если вы хотите использовать javascript для анимации градиента, вам больше не нужен элемент <animate>.

//all the stops
let ss = document.querySelectorAll("#left-to-right stop");
let start = null;
let progress = 0;//the progress of the animation
let duration = 2000; //2 seconds in millisecinds
let rid = null;//request animation id

function Frame(timestamp) {
  rid = window.requestAnimationFrame(Frame);

  if (!start) start = timestamp;
  progress = timestamp - start;
  
  if (progress <= duration) {
   //for each stop reset the offset attribute
    ss.forEach(s => {
      s.setAttributeNS(null, "offset", progress / duration);
    });
  }
  // if the animation is over cancel the animation
  if (progress >= duration){window.cancelAnimationFrame(rid)}
}

Frame();

<svg width="300" height="300">
    <defs>
    <linearGradient id="left-to-right">
      <stop offset="0" stop-color="#ff0000"></stop>
      <stop offset="0" stop-color="#fff" ></stop>
    </linearGradient>
  </defs>
  <path id="myPath" d="M 280 210 Q 237 144 180 140 Q 120 144 80 210 L 280 210" stroke="black" fill="url(#left-to-right)" />
</svg>

Надеюсь, вы найдете это полезным.