如何自动缩短SVG线段预留箭头空间且不修改线段端点坐标？

结论 #

原生SVG目前没有内置可以自动缩短线段为末端marker预留空间的特性，不过你可以通过以下两种低成本方案实现需求，无需手动计算调整每个线段的端点坐标：

方案1：marker内置遮挡层（最适合纯色背景场景） #

直接在marker定义中加入一块和画布背景同色的矩形，盖住线段延伸到箭头区域的部分，视觉上就实现了线段仅到箭头底部的效果，完全不需要修改原有线段的任何属性。
你提供的示例代码修改后如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 50 10" width="1000" height="200">
<defs>
  <marker 
     id="arrowhead" 
     markerWidth="20" markerHeight="3" 
     refX="20" refY="1.5" 
     orient="auto" 
     markerUnits="strokeWidth"
  >
    <!-- 新增和背景同色的矩形，遮挡住伸入箭头区域的线段部分 -->
    <rect x="0" y="0" width="20" height="3" fill="white" />
    <path d="M0,0 L20,1.5 L0,3 z" fill="#000" />
  </marker>
</defs>
<line x1="0" y1="2" x2="25" y2="3" stroke="red" marker-end="url(#arrowhead)" />
</svg>

方案2：使用stroke-dasharray缩短线段（适合透明/复杂背景场景） #

如果你的画布背景不是纯色，无法用遮挡方案，可以通过stroke-dasharray搭配少量JS自动计算所有线段的缩短长度，无需手动修改每个线段的端点：

1. 给所有需要加箭头的线段添加自定义属性比如data-arrow-length="20"，标注预留的箭头长度
2. 页面加载时JS自动计算每个线段的总长度，设置stroke-dasharray为「线段总长度-箭头长度 任意大于箭头长度的值」，stroke-dashoffset设为0，就可以自动把线段末端缩短指定长度
3. 配合refX="0"让箭头尖端刚好对齐原线段的端点位置即可

示例JS代码参考：

document.querySelectorAll('line[data-arrow-length]').forEach(line => {
  const arrowLen = parseFloat(line.dataset.arrowLength);
  const x1 = parseFloat(line.getAttribute('x1'));
  const y1 = parseFloat(line.getAttribute('y1'));
  const x2 = parseFloat(line.getAttribute('x2'));
  const y2 = parseFloat(line.getAttribute('y2'));
  // 计算线段总长度
  const totalLen = Math.hypot(x2 - x1, y2 - y1);
  // 设置虚线，仅渲染前(totalLen - arrowLen)的部分
  line.setAttribute('stroke-dasharray', `${totalLen - arrowLen} ${arrowLen + 1}`);
})

内容的提问来源于stack exchange，提问作者georch