Javascript 使用RequestAnimationFrame制作SVG动画-消失元素

我遇到了一个我找不到任何信息的问题，也许有人在svg方面有更丰富的经验可以帮我一把

我以编程方式创建svg星形（下面的代码），并希望动态更改它们的

linearGradient

offset

。当您在inspector中查看时，该值会按预期随时间变化，动画到达目标时将被取消。问题是-SVG不再出现了

HTML:

JS:

---

我把你的代码复制到这把小提琴上，效果很好？（我只是没有使用jQuery）嗯，我想知道为什么我的网站上显示了0x0大小的svg：|你有任何CSS或其他代码可能会改变svg的比例吗？我已经将所有相关的CSS添加到了这个问题中。它最初是

scale（0）

，但在应用动画后，它会发生变化。它与

setTimeout'ers

一起工作，您不检查任何地方的时间（requestAnimationFrame回调的第一个参数）-

ii++

是不可预测的（并且可能用得太快）

<div id="newStars"></div>

  svg[id*='svg'] {
    transform: scale(0);
  }
  #icon-star1, .animation {
    transform-origin: 50% 50%;
    animation: animateStar 1s linear forwards;
  }
  @keyframes animateStar {
    0% {
      transform: scale(0) rotate(0deg);
    }
    50% {
      transform: scale(1.1) rotate(180deg);
    }
    75% {
      transform:  rotate(360deg);
    }
    100% {
      transform: scale(1);
    }
  }

function createStar(nb) {
  const svgns = 'http://www.w3.org/2000/svg';

  const svg = document.createElementNS(svgns, 'svg');
  const defs = document.createElementNS(svgns, 'defs');
  const gradient = document.createElementNS(svgns, 'linearGradient');
  const g = document.createElementNS(svgns, 'g');
  const path = document.createElementNS(svgns, 'path');
  const div = document.createElement('div');

  const stops = [
    {
      'color': 'red',
      'offset': '0%',
    }, {
      'color': 'lightgrey',
      'offset': '0%',
    },
  ];

  for (let i = 0; i < stops.length; i++) {
    const stop = document.createElementNS(svgns, 'stop');
    stop.setAttribute('stop-color', stops[i].color);
    stop.setAttribute('offset', stops[i].offset);

    gradient.appendChild(stop);
  }

  // Apply the <lineargradient> to <defs>
  gradient.id = `Gradient${nb}`;
  gradient.setAttribute('x1', '0');
  gradient.setAttribute('x2', '100%');
  gradient.setAttribute('y1', '0');
  gradient.setAttribute('y2', '0');
  defs.appendChild(gradient);

  g.id = `g${nb}`;

  path.setAttribute('stroke', 'blue');
  path.setAttribute('stroke-width', '2');
  path.setAttribute('width', '100%');
  path.setAttribute('height', '100%');
  path.setAttribute('d', 'M20.388,10.918L32,12.118l-8.735,7.749L25.914,31.4l-9.893-6.088L6.127,31.4l2.695-11.533L0,12.118 l11.547-1.2L16.026,0.6L20.388,10.918z');
  path.setAttribute('fill', `url(#Gradient${nb})`);

  svg.setAttribute('width', '100%');
  svg.setAttribute('height', '100%');
  svg.setAttribute('version', '1.1');
  svg.setAttribute('xmlns', svgns);
  // svg.setAttribute('viewBox', '0 0 50 50');
  svg.id = `svg${nb}`;

  div.setAttribute('style', 'width:35px; height:35px;');


  svg.appendChild(defs);
  svg.appendChild(g);
  g.appendChild(path);
  div.appendChild(svg);
  document.querySelector('#newStars').appendChild(div);


  let ii=0;

  function anim() {
    ii++;
    $(`#Gradient${ nb } stop`)[0].setAttribute('offset', `${ii / 10}%`);
    $(`#Gradient${ nb } stop`)[1].setAttribute('offset', `${ii / 10}%`);

    if (ii >= 1000) {cancelAnimationFrame(anim_id)} else requestAnimationFrame(anim);
  }

  let anim_id = requestAnimationFrame(anim);

}


createStar(1);
createStar(2);
createStar(3);

setTimeout(() => {
      for (let i = 1; i <= 1000; i++) {
        setTimeout(() => {
          $(`#Gradient${ nb } stop`)[0].setAttribute('offset', `${i / 10}%`);
          $(`#Gradient${ nb } stop`)[1].setAttribute('offset', `${i / 10}%`);
        }, i);
      }


      $(`#svg${nb}`).addClass('animation');
}, 1000 * (nb - 1));