svg添加箭头绘制路径运动

Question

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>

Answer 1

以下回答来自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()方法获取路径的方向角度，并将三角形的旋转角度设置为路径的方向角度。