javascript - 如何创建这样的动画 svg 渐变？

Question

我有CSS动画渐变

.test {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(90deg,#e2e2e2,#e2e2e2,#e2e2e2,#f2f2f2,#e2e2e2,#e2e2e2,#e2e2e2);
    background-size: 300% 300%;
    animation: test 3s linear infinite;
}

@keyframes test{0%{background-position:150% 150%}to{background-position:-150% -150%}}

<div class="test"></div>

但我需要使用 svg 创建它。然后我创建了它

.test {
  width: 100px;
  height: 100px;
}

<div class="test">
  <svg id="svg-test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
  <style type="text/css">
    .rect {
      fill: url(#linear-gradient);
    }
  </style>
  <defs>
  <linearGradient id="linear-gradient">
    <stop offset="0%" stop-color="#e2e2e2" />
    <stop offset="43%" stop-color="#e2e2e2" />
    <stop offset="50%" stop-color="#f2f2f2" />
    <stop offset="57%" stop-color="#e2e2e2" />
    <stop offset="100%" stop-color="#e2e2e2" />
  </linearGradient>
  </defs>
	<rect class="rect" x="-200" y="-200" width="300" height="300">
    <animateTransform attributeName="transform"
      type="translate"
      from="0 0"
      to="200 200"
      begin="0s"
      dur="1.5s"
      repeatCount="indefinite"
    />
  </rect>
</svg>
</div>

但我有一个问题，因为它只适用于 square。我需要处理所有数字。然后我尝试了这段代码

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<linearGradient id="myG">
    <stop offset="0%" stop-color="#f2f2f2">
	    <animate attributeName="offset" dur="1.5s" from="0" to="1" repeatCount="indefinite" />
    </stop>
    <stop offset="0%" stop-color="#e2e2e2" />>
    <stop offset="43%" stop-color="#e2e2e2" />
    <stop offset="50%" stop-color="#e2e2e2">
    </stop>
    <stop offset="57%" stop-color="#e2e2e2" />
    <stop offset="100%" stop-color="#e2e2e2" />	
</linearGradient> 
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#myG)" />
</svg>

它比我的 css 动画更好，但不一样。你能帮我创建与第一个示例中的 css 渐变相同的 svg 动画渐变吗？

Answer 1

这样的事情怎么样？

.test {
  width: 100px;
  height: 100px;
}

<svg class="test" viewBox="0 0 100 100">
  <style type="text/css">
    .rect {
      fill: url(#linear-gradient);
    }
  </style>
  <defs>
    <linearGradient id="linear-gradient">
      <stop offset="0%" stop-color="#e2e2e2" />
      <stop offset="33%" stop-color="#e2e2e2" />
      <stop offset="50%" stop-color="#f2f2f2" />
      <stop offset="67%" stop-color="#e2e2e2" />
      <stop offset="100%" stop-color="#e2e2e2" />
      <animateTransform attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="0s"
        dur="1.5s"
        repeatCount="indefinite"/>
    </linearGradient>
  </defs>

  <rect class="rect" x="-100" y="-100" width="300" height="300"/>
</svg>