How to use an arrow marker on an SVG element?

Question

I need to create an arrow in d3.js, but all I find are examples with diagrams of nodes. What I need is to simply make an arrow that goes from point A to point B.

I tried implementing part of the code in the following example: http://bl.ocks.org/1153292

This specific part:

svg.append("svg:defs").selectAll("marker")
    .data(["suit", "licensing", "resolved"])
  .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

But as I mentioned earlier, I do not find the way to create the arrow with a svg:line greatly appreciate the help you can give me.

svg:line can only go from A to B and only chuck norris can paint an arrow in a single stroke. try polyline or path... — philipp, Oct 01 '12 at 23:26
Possible duplicate of [Arrow triangles on my SVG line](http://stackoverflow.com/questions/11808860/arrow-triangles-on-my-svg-line) — Ciro Santilli OurBigBook.com, Apr 17 '17 at 09:39

score 60 · Accepted Answer · answered Oct 02 '12 at 08:24

60

If you meant 'how do I use an arrow marker on a <line> element?' then here's how you do that:

<line x1="100" y1="230" x2="300" y2="230" 
 marker-end="url(#yourMarkerId)" stroke="black" stroke-width="10"/>

Here's a full example. And note that marker-end is a css property, so you can also put that part in a stylesheet if you want.

If you meant you want to draw your marker with lines, then just add whatever lines you need as a child of the marker element (and make sure to use the coordinate system defined by the marker's viewBox attribute).

answered Oct 02 '12 at 08:24

Erik Dahlström

59,452
12
120
139

marker-start and marker-end is working properly but middle of line is not working...can you please check it https://jsfiddle.net/dqoL07cn/ – dom Dec 03 '16 at 09:06
1

@dom that should really be a new question, as that would help others find the answer more easily. Anyway, the mid marker actually requires there to be a mid segment, think e.g a polyline with three points. The start marker would be the starting point, the end marker the end point, and the mid marker would be used on *all* the points between the end and start points. See https://jsfiddle.net/dqoL07cn/2/ for the polyline solution. – Erik Dahlström Dec 06 '16 at 08:55

How to use an arrow marker on an SVG element?

1 Answers1

Linked