Properly overlapping the end-marker on the path

Question

Updated picture including (c)

I am using the following code in Javascript to generate an end-marker (a triangular arrow) attached to a line:

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

The above code generates an arrow that looks like (a) in the attached picture. However, the marker (triangle) extends the line. I would like to generate an arrow as shown in (b) with the pointed end of the marker aligned with the end of the line (and not extend it). Also, it should not look like a triangle as in (a), but an arrow as in (b).

I have tried several variations of the code shown in the description with different values, but they all extend the line, which is not desirable in the image I am generating.

Provided in the description.Picture of actual(a) and desired(b) image

Answer 1

This answer is the result of several comments I've exchanged with the OP. In order to place a marker where you need on a path you may use the refX and refY attributes to define the coordinates for the reference point of the marker.

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>

Answer 2

• fill ="none" remove the black color inside the arrow..
• add stroke="black"
• To prevent lines from changing their thickness, you can also use the attribute path vector-effect="non-scaling-stroke"