Svg 贝塞尔三次曲线和标记（箭头）

我是svg的新手，我的任务是做一些关于面片和贝塞尔三次曲线的工作

我有一个svg，有N条（可能有数千条）路径（贝塞尔三次曲线）。每条线/路径都有一个方向，该方向由使用标记的箭头表示。这里有一个例子

如果查看html，您将看到标记（UpArrowPrecise和DownArrowPrecise）使用orient=“270”orient=“90”旋转N度，这使得箭头或多或少指向我需要的方向

  <marker id="DownArrowPrecise"   markerWidth="10" markerHeight="20" refX="5" refY="10" orient="90" >
      <path  d="M0,20 L10,20 L5,0 Z"   />
  </marker>

对于直线，我可以看到标记上的orient=“auto”非常有用。然而，对于我的贝塞尔三次曲线，我遗漏了一些东西

我可以（并且已经编写了一个javascript函数，该函数将计算每个路径/线的坡度，从而计算相对于x轴的角度，从那里我可以创建一个具有适当“orient”值的标记。然而，这对我来说似乎是非常重量/过多的。对于每一条线（可能数千条）我将不得不做一个计算，并创建一个具有适当“orient”值的标记。这是可行的，但似乎需要做大量的工作

由于InfoD3在真正的应用程序中为所有这些东西提供了动力，JSFIDLE演示说明了这个问题

---

有人知道最好的方法吗？我害怕在这里重新发明轮子。

首先画出标记，使它们朝正确的方向移动，然后使用orient=“auto”，这样UA就可以为您做，例如

<marker id="UpArrowPrecise"   markerWidth="20" markerHeight="10" refX="10" refY="5" orient="auto" >
  <path d="M20,0 L20,10 L0,5 Z"   />
</marker>

<marker id="DownArrowPrecise"   markerWidth="20" markerHeight="10" refX="10" refY="5" orient="auto" >
  <path d="M0,0 L0,10 L20,5 Z"   />
</marker>

在测试用例上运行完美。在真正的应用程序中（完全相同的代码）这真是一团糟。曲线的方向大致相同，但标记是剪裁的，不是自动定向的。如果你有任何想法，我将不胜感激。因为我看不到你真正的应用程序，而且我还没有发现如何阅读大脑，所以很难进一步帮助你。无可争辩：）谢谢你的帮助。我会继续挖。