如何用javascript代替HTML填充svg路径

Question

我想知道如何用javascript而不是HTML来动画SVG路径。目前，我已经找到了几篇关于使用javascript的动画的溢出文章，并在jQuery中找到了许多更改javascript中的属性的文章。

我找到的链接：Fill color SVG path with animation Animate SVG path via 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>

​

我希望你会发现这个有用。