Svg 动画在同一个地方重播

Question

我正在与 HTML、CSS 和 JS 一起开发塔防游戏。我希望能够使用 svg 动画创建遵循路径的 svg 圆圈。为了做到这一点，我写了这段代码：

<div id="trackPart">
  <progress id="healthBar" max="200" value="200" onclick="this.value = randInt(0, this.max)" ></progress>
  <svg viewbox="0 0 1000 3000" id="track" xmlns="http://www.w3.org/2000/svg">
    <path id="path" fill="none" stroke="red" stroke-width="15" d="M 0, 50 h 900 v 100 h -800 v 100 h 800 v 300 h -900" style="cursor: pointer"/>
  </svg>
</div>

var path = document.getElementById("path")
var svgurl = "http://www.w3.org/2000/svg"
var svg = document.getElementById("track")

listOfColors = ["green", "blue", "purple", "lime", "yellow"]

function attackerSVG(color) {
  let element = document.createElementNS(svgurl, "circle")
  element.setAttribute("cx", 0)
  element.setAttribute("cy", 0)
  element.setAttribute("r", 15)
  element.setAttribute("fill", color)

  let animation = document.createElementNS(svgurl, "animateMotion")
  animation.setAttribute("dur", "30s")
  animation.setAttribute("repeatCount", "indefinite")
  animation.setAttribute("rotate", "auto")
  animation.setAttribute("path", String(path.getAttribute("d")))
  animation.setAttribute("onrepeat", "console.log(\"repeat\")")
  animation.setAttribute("restart", "always")
  animation.beginElement()

  element.appendChild(animation)
  svg.appendChild(element)
  return element
}

attackerSVG("black")

我第一次运行 attackerSvg 函数，一切正常。在路径的起点创建一个圆圈并跟随它。但是，一旦我创建了另一个，它就会在其他 svg 圆圈所在的位置开始其动画序列。如果你想明白我的意思，你可以去这里 https://replit.com/@hello1964/Tower-defense-game#script.js

每当您看到圆圈改变颜色时，就是创建了一个新圆圈。当您查看控制台时，每次圆圈完成一个循环时，它都会打印“重复”。因为它们都在同一个地方，所以它会打印多次。非常感谢您的帮助，谢谢。

Answer 1

SVG 保持自己的时序。将元素添加到 SVG，将以当前时钟启动它。为所欲为，其实需要延迟开始

// outside globally somwhere
let count = 0;

// inside function attackerSVG
animation.setAttribute('begin', `${++count}s`)

Svg 动画在同一个地方重播

Svg animations replaying in the same spot

javascript

animation

svg

path