Let’s talk about the drawing method first: first define a positioning pattern by using the <marker> tag in the <def> tag. This tag needs to be written in the <svg> tag.
<svg>
<defs>
<marker id='markerArrow' viewBox="0 0 40 24" markerWidth='20' markerHeight='12' refX='10' refY='6' orient='auto'>
<path d='M2,0 L10,6 L0,10 Z' stroke="#4b5159" stroke-width="2"/>
</marker>
</defs>
</svg>
After that, you only need to introduce the defined pattern through the id name in other places. This process is the same as when we define variables and use them. The actual arrow pattern is the part drawn by <path>.
Then use it on other paths (ps: "..." are some other parameters)
<path ....... marker-end='url(#markerArrow)'/>
Next, let’s talk about the understanding of parameters: You can think of the marker tag as a new statement. The svg image defined under the statement tag is a reusable thing. The viewBox refers to the size of the view box. You can think of it as a user As a tool for scaling the size of the original drawing (image drawn under the marker), markerWidth and markerHeight need no further explanation. Note that this size will determine the display range of your image. The value of orientation is that the line you connect is not necessarily a straight line, so what should be the orientation of the entire marker area when connecting. If the orientation is auto, it means that the orientation is based on the position of the tangent line.
The key points are: refX and refY. They refer to the actual anchor point position of your marker (rectangular area) when it is connected to other paths. You can easily understand it by drawing a picture .
On a path, this rectangular area is the area where you want to display the image. Its length and width are the width and height you set. When it is placed on the path, it is placed based on the ref point. For example, the first In this picture, my ref coordinates (the coordinates are determined relative to the marker rectangular box area, the coordinates of the upper left corner of the area are (0,0)) are (0,5), then when I mark-end, this (0 ,5) will be used as a connection point to connect to the end of the path. For example, in the second picture, the coordinates of my ref are (10,5). Then when the marker-end is used, the ref point will be connected to the end.