svg - 您可以缩短 SVG 线以自动为箭头腾出空间吗？

Question

在 SVG 中，您可以定义可以放置在行首或行尾的标记，如下所示：

<defs>
  <marker 
     id="arrowhead" 
     markerWidth="9" markerHeight="6" 
     refX="9" refY="3" 
     orient="auto" 
     markerUnits="strokeWidth"
  >
    <path d="M0,0 L9,3 L0,6 z" />
  </marker>
</defs>

稍后，您可以像这样使用它们：

<line x1="0" y1="0" x2="100" y2="100" stroke="red" strokeWidth="5" marker-end="url(#arrowhead)" />

但是，这种方法会导致箭头和线重叠：

那看起来不太好。

现在，我们当然可以将箭头稍微向外移动并缩短线以补偿箭头的增加长度，使用一些三角函数来确定需要移动的位置x2和位置。y2每当我改变箭头的长度时，我都需要对所有使用箭头的线重新进行这些计算，以使箭头的尖端到达相同的位置。

我的直觉是，就像 SVG 已经在使用 关注方向一样orient="auto"，可能会有一个类似的设备来稍微缩短线条以适应箭头的空间。所以，我的问题是：

是否可以在不移动坐标本身的情况下使 SVG 线比其坐标之间的距离短固定长度？

编辑：链接的答案不能解决我的问题。我知道我可以使用refXandrefY来移动标记——我已经这样做了，请参见上面的代码——但我想将行尾移动到标记下方。

这是一个带有更明显示例的片段：红线应以黑色箭头结尾。相反，箭头覆盖在它上面，使红色闪耀。现在，我可以将线缩短一点并refX="0"用于所需的效果，但这需要手动计算x2和y2位置。我的问题是 SVG 是否有一个内置功能可以让我缩短线条，或者是否唯一的可能性是通过手动更改端点来缩短线条。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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"
  >
    <path d="M0,0 L20,1.5 L0,3 z" />
  </marker>
</defs>
<line x1="0" y1="2" x2="25" y2="3" stroke="red" marker-end="url(#arrowhead)" />
</svg>

标签： svg