我完全懂你在做自动机圆箭头图时的SVG箭头困扰——要么箭头头硬生生戳到目标图形（比如你例子里的竖线）外面，要么线段在箭头屁股后面露个讨厌的小矩形尾巴，之前调坐标还要算来算去，简直是效率杀手对吧？咱们来一步步解决这个问题，不用复杂的额外数学计算！

先帮你理清楚之前尝试的问题根源：

• Bad Arrow 1：你用的MDN默认例子把refX设为1，这意味着marker的参考点在箭头三角形的左侧边缘，所以当箭头贴到线段终点时，整个箭头会向右延伸出线段一段距离，看起来就像箭头“穿墙”了，完全不符合自动机图里箭头精准指向节点的需求。
• Bad Arrow 2：你把refX改成了10（三角形的右端点），但线段默认的方形线帽（stroke-linecap: butt）会让线段末端的stroke露出在箭头根部后面，形成那个扎眼的小矩形——这是因为marker没有完全覆盖住线段的末端区域。
• OK Arrow 1：手动把线段x2往左调4个单位确实能出效果，但要跟着stroke-width、marker大小改数值，做自动机图时每个箭头都要算坐标，想想就头大。

完美解决方案：让箭头尖端精准对齐线段终点 #

核心思路是把箭头的尖端设为marker的参考点，这样marker的尖端会和线段的终点完全重合，同时线段的末端会被箭头根部自动覆盖，不用手动调整线段坐标。

最终可复用的Marker定义

line { stroke: black; stroke-width: 1; }
svg { height: 2.5lh; width: 5lh; }

<svg viewBox="0 0 30 15">
  <defs>
    <marker id="perfect-automaton-arrow" 
            viewBox="0 0 10 10" 
            refX="10"  <!-- 参考点设为箭头尖端的x坐标（对应路径里的L10 5） -->
            refY="5" 
            markerUnits="strokeWidth"  <!-- 让箭头大小随线宽自动缩放 -->
            markerWidth="4" 
            markerHeight="4" 
            orient="auto"  <!-- 箭头自动跟随线段方向旋转 -->
            fill="red">
      <!-- 三角形路径：尖端在(10,5)，根部覆盖线段末端 -->
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  
  <!-- 目标“墙”（模拟自动机的节点或边界） -->
  <line x1="20" y1="5" x2="20" y2="15"></line>
  
  <!-- 箭头线段：直接画到目标点即可，无需调整坐标 -->
  <line x1="10" y1="10" x2="20" y2="10" marker-end="url(#perfect-automaton-arrow)"></line>
</svg>

为什么这能解决所有问题？

1. refX=10精准对齐：marker的参考点正好是箭头三角形的尖端，应用到线段时，这个尖端会和线段的终点(x2,y2)完全重合，不会出现箭头穿墙或者线段露尾巴的情况。
2. markerUnits="strokeWidth"自适应：箭头大小会跟着线段的stroke-width自动按比例缩放，不管你画粗线还是细线，箭头和线宽的比例都保持协调，不用手动改marker尺寸。
3. 零额外计算：线段直接画到目标节点的边缘坐标就行，比如指向圆形节点时，把线段终点设为圆的边缘点，箭头尖端会完美落在圆上，不用算偏移量。

这样你做自动机圆箭头图时，只需要定义一次这个marker，所有箭头都能实现像素级完美对齐，再也不用跟坐标计算较劲啦！

内容来源于stack exchange