Javascript 如何正确地将SVG中立方贝塞尔上的箭头移动到其中心

有一个带箭头标记的立方体贝塞尔：

<defs>
  <marker id="arrow" orient="auto" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" refX="10" refY="6">
    <path d="M0,0 L0,12 L12,6 z"></path>
  </marker>
</defs>

<path marker-end="url(#arrow)" d="M 220 104 C 220 144 400 184 400 224" stroke-width="2"></path>

我想将箭头移到曲线的中心，但当我改变

refX

attr of

marker

时，箭头不会穿过曲线而是直接移到顶部（）。它适用于二次贝塞尔曲线，但不适用于三次曲线

有没有一种方法可以在三次贝塞尔曲线的中心显示一个箭头，并使用标记器进行正确定位

我知道有一个选项可以获取长度坐标，计算旋转角度，自己做定位和旋转，但我想避免这样的计算

UPD：我创建了一个代码笔来演示这个问题：

---

UPD2：另一个代码笔，用于证明它正在使用二次贝塞尔曲线：

refX

和

refY

是在坐标系中定义标记的点，与路径方向无关。它们只定义被视为标记原点的点，并将其放置在路径的末端

无法沿计算路径定义标记。标记只能放置在路径的顶点上。因此，看似直接的方法是找到一个中点，在那里放置一个顶点，带有合适的三次贝塞尔控制点

---

refX

和

refY

是坐标系中定义标记的点，与路径方向无关。它们只定义被视为标记原点的点，并将其放置在路径的末端

无法沿计算路径定义标记。标记只能放置在路径的顶点上。因此，看似直接的方法是找到一个中点，在那里放置一个顶点，带有合适的三次贝塞尔控制点

为什么这个二次贝塞尔的例子能起作用？动画情感是一种有趣的方法，但不幸的是IE11的支持对我来说是至关重要的。你的代码笔只是偶然地起作用，因为路径几乎一直到标记所在的点。将refX设置为100或150，然后查看它是否偏离侧面。我知道你在说什么。嗯，看来我需要自己做所有的计算。非常感谢。我会将你的答案标记为正确，即使它在IE中不起作用。@RobertLongson

rotate=“auto”

不起作用。沿着路径获取点是非常困难的，所以它不值得。为什么这个二次贝塞尔的例子可以工作呢？动画情感是一种有趣的方法，但不幸的是IE11的支持对我来说是至关重要的。你的代码笔只是偶然地起作用，因为路径几乎一直到标记所在的点。将refX设置为100或150，然后查看它是否偏离侧面。我知道你在说什么。嗯，看来我需要自己做所有的计算。非常感谢。我会将你的答案标记为正确，即使它在IE中不起作用。@RobertLongson

rotate=“auto”

不起作用。沿着这条路走下去是很困难的，所以不值得。