12

I need to make it flexible. It can be some type of lines and arrows on the end of lines.

So, I decided to create two SVG objects: lines and an arrowhead.

How to draw an arrowhead on the end or beginning of the line?

My line is:

<svg width="500" height="100">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>

Improve this question
9
  • 3
    use a marker
    – Robert Longson
    Commented Mar 16, 2020 at 22:01
  • Is it possible to chnage direction of arrawhead? Could you share an sample?
    – user12700434
    Commented Mar 16, 2020 at 22:03
  • line does not have marker-start
    – user12700434
    Commented Mar 16, 2020 at 22:05
  • visit the link for an example and line does have marker-start.
    – Robert Longson
    Commented Mar 16, 2020 at 22:07
  • 1
    in your fiddle you need to change the refX to a smaller value: try 5 or 6. This will make the marker to go outside the svg canvas, so you'll need to also change the value of the viewBox to viewBox="0 0 110 100" to make the svg wider
    – enxaneta
    Commented Mar 16, 2020 at 22:27

1 Answer 1

Reset to default
18

You can use defs and path — http://jsfiddle.net/jxtfeqag/

<svg>
  <defs>
    <marker 
      id='head' 
      orient="auto" 
      markerWidth='3' 
      markerHeight='4' 
      refX='0.1' 
      refY='2'
    >
      <path d='M0,0 V4 L2,2 Z' fill="black" />
    </marker>
  </defs>

  <path
    id='arrow-line'
    marker-end='url(#head)'
    stroke-width='4'
    fill='none' stroke='black'  
    d='M0,0, 80 100,120'
  />
        
</svg>

Improve this answer