javascript - 正确重叠路径上的结束标记

Question

Updated picture including (c)

我在 Javascript 中使用以下代码生成附加到一行的结束标记(三 Angular 形箭头):

edge.marker('end', 10, 10, function (add) {
add.path('M2,2 L2,11 L10,6 L2,2').fill('black');});

上面的代码生成了一个箭头，看起来像附图中的 (a)。但是，标记(三 Angular 形)会延长线。我想生成一个箭头，如 (b) 所示，标记的尖端与线的末端对齐(而不是延伸它)。此外，它不应看起来像 (a) 中的三 Angular 形，而是 (b) 中的箭头。

我尝试了描述中显示的具有不同值的代码的多种变体，但它们都延长了线条，这在我生成的图像中是不可取的。

在描述中提供。 Picture of actual(a) and desired(b) image

Answer 1

这个答案是我与 OP 交换的几条评论的结果。为了将标记放置在路径上您需要的位置，您可以使用 refX 和 refY 属性来定义标记引用点的坐标。

svg{border:1px solid; width:45%}
path{fill:none; stroke:black; stroke-width:2}

<svg viewBox="0 0 100 50">
  <marker id="arrow" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto" markerUnits="userSpaceOnUse"
 fill="none" stroke="black">
<path  d="M2,10 L10,6 L2,2" />
</marker>
  <path d="M20,25 H80"  marker-end="url(#arrow)" />  
</svg>