Question

我正在使用Javascript中的以下代码来生成附加到一行的结束标记（三角形箭头）：

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

上面的代码生成一个箭头，该箭头在所附图片中看起来像（a）。但是，标记（三角形）会延长线。我想生成一个箭头，如（b）所示，标记的尖端与线的末端对齐（而不是延长线）。另外，它看起来不应该像（a）中的三角形，而是像（b）中的箭头。

我尝试使用不同的值对描述中显示的代码进行多种变体，但是它们都将行扩展了，这在我生成的图像中是不希望的。

在说明中提供。Picture of actual(a) and desired(b) image

Answer 1

fill ="none"删除箭头内的黑色。
添加stroke="black"
为防止线条改变其粗细，您还可以使用属性path vector-effect="non-scaling-stroke"

Answer 2

此答案是我与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>

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

2 个答案: