Since the project needs a trace restoration capability, document the SVG implementation
A quick post on the code
<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" "> <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>Copy the code