SVG：如何使用贝塞尔曲线路径校正偏离中心的标记？

Question

上下文

我想在指向我正在制作的图表中的节点的路径上获取箭头。因为我使用的是贝塞尔曲线，所以更容易分别使用路径结束/开始的点的中心。

在附带的 JSFiddle（下方）中，我们看到一个简单的点三角形，其中一个是二次贝塞尔曲线的控制点。此外，结束标记已偏移以与节点接触，而不是部分位于节点后面；这是因为路径被绘制到点的中心而不是边缘。

从美学上讲，这幅画有一些不太正确的地方：

箭头尖比路径细
尽管贝塞尔曲线上箭头的尖端角度正确，但路径未在箭头出现的点居中。

出现这些美学缺陷是因为：

箭头的点明显比路径细/路径延伸通过节点
相对于路径的曲率，箭头太大，箭头问题没有令人满意的解决方案（给定当前代码）

现在可以像在 JSFiddle 的第二个 SVG 中所做的那样，通过制作紧密的三次贝塞尔曲线来临时修改第二个问题。

但是，正如在第三个 SVG 中看到的那样，这也不适用于极端曲率。

问题

有没有一种简单的方法可以保证箭头点的角度和箭头连接时路径的位置居中？另一种方法是简单地将箭头缩放到足够小，以至于人们不会注意到？

有没有办法让从箭头开始到结束的路径不可见？ / 或者，一种在到达节点之前让路径结束的简单方法？

# code to meet SO requirements
# look at this code

JSFiddle

SVG Marker Demo

Answer 1

对于您的特定应用程序，请尝试向标记添加一个 viewBox 以使其更小，以便它看起来与贝塞尔曲线的末端对齐。（SVG 标记当前不与曲线对齐。）将 refX 更改为 'slide' 箭头向前一点到行尾。例如

<marker id="arrow" viewBox="0 0 25 25" markerWidth="20" markerHeight="10" refX="20" refY="5" orient="auto" markerUnits="strokeWidth">

Answer 2

为什么不让标记使用您的坐标系，而不是描边：

<marker id="arrow" markerWidth="40" markerHeight="30" refX="25" refY="-5"
                   orient="auto" markerUnits="userSpaceOnUse" overflow="visible">
  <!-- path for the arrow head -->
  <path d="M-18,10 l 6 -15 l -6 -15 l 40 15 l -40 15 Z"
        fill="white"
        stroke='black'
        stroke-width='3'
        opacity='1' />
</marker>

已排序。如果我们在之后绘制路径 "points" 以便箭头最终位于顶部：

SVG：如何使用贝塞尔曲线路径校正偏离中心的标记？

SVG: how to correct for off-centered markers with bezier curved paths?

html

svg

bezier

markers

上下文

问题

JSFiddle