svg添加箭头绘制路径运动

svg绘制的一个路径 如何加上一个箭头 也沿着这个路径运动哎

<template>
  <div class="box">
    <svg
      id="one"
      width="100%"
      height="100%"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g>
        <path
          id="svg_3"
          width="200"
          height="200"
          d="m200.25019,1199.72662l450.25028,-180.27314l409.99998,180l-200,-160.49993"
          fill-opacity="0"
          stroke-opacity="null"
          stroke-width="100.5"
          stroke="#224464"
          fill=""
        />
      </g>
    </svg>
  </div>

</template>

<script>
import anime from "animejs/lib/anime.es.js";
export default {
  mounted() {
    let path_one = document.querySelectorAll("#one path");
    for (let i = 0; i < path_one.length; i++) {
      console.log(path_one, i);
      anime({
        targets: path_one[i],
        delay: i * 100,
        strokeDashoffset: [anime.setDashoffset, 0],
        easing: "easeInOutSine",
        duration: 1000,
        loop: 1,
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.overall {
  background: #f0f0f0;
}

svg {
  position: absolute;
  left: 0;
  top: 0;
}

path {
  stroke-width: 30px;
}
</style>

以下回答来自ChatGPT，
你可以在路径的终点处添加一个箭头，可以通过在路径的最后一个点上添加一个三角形来实现。具体步骤如下：

1. 在路径的最后一个点上添加一个三角形，可以使用SVG的polygon元素来创建一个三角形。

2. 将三角形的fill属性设置为与路径相同的颜色，以使其看起来像是路径的一部分。

3. 将三角形的transform属性设置为与路径的transform属性相同，以使其与路径保持一致。

4. 将三角形的旋转角度设置为路径的方向角度，可以使用SVG的getTotalLength()和getPointAtLength()方法来获取路径的方向角度。

下面是一个示例代码，可以在路径的终点处添加一个箭头：

<template>
  <div class="box">
    <svg
      id="one"
      width="100%"
      height="100%"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g>
        <path
          id="svg_3"
          width="200"
          height="200"
          d="m200.25019,1199.72662l450.25028,-180.27314l409.99998,180l-200,-160.49993"
          fill-opacity="0"
          stroke-opacity="null"
          stroke-width="100.5"
          stroke="#224464"
          fill=""
        />
        <polygon
          id="arrow"
          points="0,0 20,10 0,20"
          fill="#224464"
          transform="translate(1059.25, 1019.45348) rotate(45)"
        />
      </g>
    </svg>
  </div>
</template>
<script>
import anime from "animejs/lib/anime.es.js";
export default {
  mounted() {
    let path_one = document.querySelectorAll("#one path");
    for (let i = 0; i < path_one.length; i++) {
      console.log(path_one, i);
      anime({
        targets: path_one[i],
        delay: i * 100,
        strokeDashoffset: [anime.setDashoffset, 0],
        easing: "easeInOutSine",
        duration: 1000,
        loop: 1,
      });
    }
    let arrow = document.querySelector("#arrow");
    let path = document.querySelector("#svg_3");
    let pathLength = path.getTotalLength();
    let endPoint = path.getPointAtLength(pathLength);
    let prevPoint = path.getPointAtLength(pathLength - 1);
    let angle = Math.atan2(endPoint.y - prevPoint.y, endPoint.x - prevPoint.x);
    let degrees = angle * (180 / Math.PI);
    arrow.setAttribute(
      "transform",
      `translate(${endPoint.x}, ${endPoint.y}) rotate(${degrees})`
    );
  },
};
</script>
<style lang="scss" scoped>
.overall {
  background: #f0f0f0;
}
svg {
  position: absolute;
  left: 0;
  top: 0;
}
path {
  stroke-width: 30px;
}
</style>

在这个示例中，我们在路径的最后一个点上添加了一个三角形，然后使用getTotalLength()和getPointAtLength()方法获取路径的方向角度，并将三角形的旋转角度设置为路径的方向角度。

参考代码编写思路：使用SVG的marker元素来添加箭头，并使用marker-start，marker-mid和marker-end属性来引用这些箭头

<svg>  
  <path d="M10 10 L90 90" stroke="black" stroke-width="2" fill="none" />  
  <marker id="arrow" markerWidth="10" markerHeight="10" refX="15" refY="5" orient="auto">  
    <path d="M10,10 L10,10 L15,5 L20,10 L20,10 Z" fill="black" />  
  </marker>  
  <path d="M10 10 L90 90" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)" stroke="black" stroke-width="2" fill="none" />  
</svg>