Question

我是svg的新手，我的任务是修补补丁和贝塞尔曲线。

我有一个带有N（可能是数千）路径的svg（bezier cubic curve's）。每条线/路径具有使用标记由箭头表示的方向。这里有一个例子;

如果您查看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”是一种享受。但是我错过了我的bezier立方曲线案例。

我可以（并且编写了一个javascript函数，它将近似计算斜率，从而计算出相对于每条路径/线的x轴的角度，从那里我可以创建一个具有适当“orient”值的标记。对我来说，这似乎是非常重量级/过度杀伤。对于每一行（可能是数千），我将不得不进行计算并创建一个具有适当“方向”值的标记。它可行，但它似乎是一项非常多的工作。 / p>

有关信息D3正在为真正的应用程序中的所有这些东西供电，jsfiddle演示说明了问题。

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

Answer 1

绘制标记，使它们首先朝向正确的方向，然后使用orient =＆＃34; auto＆＃34;所以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>

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

1 个答案: