Animation 使用anime.js为SVG渐变停止颜色设置动画

我正在尝试设置SVG径向渐变的动画，更改

元素上“color stop”属性的颜色值。我成功地使用了

。这是我的密码：

//CSS
#tile-grid {
  width: 300px;
  height: 300px;
}
//HTML
<div>
  <svg id="tile-grid" class="svg-shape-01">
    <defs>
      <radialGradient id="radial-grad-01" cx="50%" cy="70%" r="60%" fx="50%" fy="90%">
        <stop class="grad-stop-01" offset="10%" stop-color="hsla(0,70%,50%,1)" stop-opacity="1">
          <animate attributeName="stop-color" values="hsla(0,70%,50%,1); hsla(80,70%,50%,1)" dur="3s" repeatCount="indefinite"  />
        </stop>
        <stop class="grad-stop-02" offset="100%" stop-color="hsla(30,70%,50%,1)" stop-opacity="1">
          <animate attributeName="stop-color" values="hsla(30,70%,50%,1); hsla(240,70%,50%,1)" dur="3s" repeatCount="indefinite"  />
        </stop>
      </radialGradient>
    </defs>
    <rect id="r1" width="200" height="200" fill="url(#radial-grad-01)" />
  </svg>
</div>

如果我尝试在animGradient（）上使用“停止颜色”而不是“停止颜色”，则会出现以下错误：

未捕获的语法错误：意外的标记'-'

我还尝试用硬编码值替换rc1和rc2，如“hsla（80,70%，50%，1）”

有什么想法吗？我不确定我所尝试的动画是否可行，可能“停止颜色”不可设置动画，或者可能我只是没有正确编写函数

谢谢大家!

//randHSLAColor() returns a string like 'hsla(50,60%,80%,0.4)'
function animGradient() {
        let rc1 = randHSLAColor();
        let rc2 = randHSLAColor();
        let gra1 = anime({
            targets: 'grad-stop-01',
            stopColor: rc1,
            easing: 'linear',
            duration: 1000
        });
        let gra2 = anime({
            targets: 'grad-stop-02',
            stopColor: rc2,
            easing: 'linear',
            duration: 1000
        });
    }