记录一下svg轨迹动画

因项目需要一个轨迹还原的功能，记录一下svg实现

简单贴一下代码

<svg id="movePoint" :width="width" :height="height">
        <defs>
          <marker
            id="markerSquare"
            markerWidth="3"
            markerHeight="3"
            refX="2"
            refY="2"
            orient="auto"
          >
            <rect
              x="1"
              y="1"
              width="3"
              height="3"
              style="stroke: none; fill: #000000"
            ></rect>
          </marker>

          <marker
            id="markerArrow"
            markerWidth="6"
            markerHeight="6"
            refX="2"
            refY="3"
            orient="auto"
            markerUnits="strokeWidth"
          >
            <path d="M1,1 L1,5 L4,3 L1,1" style="fill: #000000"></path>
          </marker>
        </defs>
        <path
          :d="dPath"
          stroke="#f89e35"
          stroke-width="5"
          fill="none"
          marker-start="url(#markerSquare)"
          marker-end="url(#markerArrow)"
        />
        <circle r="10" x="50" y="0" style="fill: red">
          <animateMotion
            dur="5s"
            repeatCount="indefinite"
            rotate="auto"
            :path="dPath"
          />
        </circle>
      </svg>

哈哈 差不多就是这个样子运动， 如果想要曲线轨迹的话就得用贝塞尔啦。