SVG：如何使用贝塞尔弯曲路径校正偏心标记？

Question

上下文

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

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

从审美角度来看，这幅画有一些不太合适的东西：

• 箭头的尖端比路径

更细

• 虽然尖端在贝塞尔曲线上的箭头角度正确，但路径不会在箭头出现的点处居中。

这些美学缺陷的发生是因为：

• 箭头的点明显比路径更细，路径延伸通过节点

• 箭头在路径曲率方面是如此之大，箭头问题没有令人满意的解决方案（鉴于目前的代码）

现在可以通过在JSFiddle的第二个SVG中制作紧密的三次贝塞尔曲线来判断第二个问题。

然而，正如第三个SVG中所见，这也不适用于极端曲率。

问题

是否有一种简单的方法可以确保箭头头部连接时箭头头部的角度和路径的位置居中;或者，一种简单地将箭头缩放到足够小的地方的方法吗？

有没有办法让从箭头开始到最后的路径不可见？ /或者是一种在命中节点之前获取路径的简单方法吗？

# code to meet SO requirements
# look at this code

的jsfiddle

SVG Marker Demo

Answer 1

对于您的特定应用程序，尝试将一个viewBox添加到标记以使其变小，使其看起来与贝塞尔曲线的末端有些对齐。 （SVG标记当前不与曲线对齐。）将refX更改为＆＃39; slide＆＃39;箭头有点向前到行尾。 e.g。

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

Answer 2

为什么不让标记使用你的坐标系，而不是使用strokeweight：

<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>

排序。如果我们在之后绘制路径，那么箭头就会在顶部结束：