CODEWITHSUNDEEP
javascriptcsssvgreactjs
zeiteisen
zeiteisen

Reputation: 7168

How to use markerEnd in react to draw an arrow

I want to draw an arrow with react. I found that maker-end is supported, see: React Docs. It is called markerEnd instead of marker-end. It expect a 'url(#markerArrow)' but it doesn't seem to work in react. How to make an arrow with svg and react? Here is my approach in a component subclasses render function: It draws the line but not the arrow head.

render() {
    return(
        <div>
            <svg className='Line' style={{ height:height, width:width, top:top, left:left }}>
                <defs>
                    <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
                            orient="auto">
                        <path d="M2,2 L2,11 L10,6 L2,2" style={{fill: '#000000'}} />
                    </marker>
                </defs>
                <line x1={lx1} y1={ly1} x2={lx2} y2={ly2} markerEnd={ 'url(#markerArrow)' }  style={{ stroke: 'red', strokeWidth: 2 }} />
            </svg>
        </div>
    );
}

Image from the missing arrow head There should be an arrow on the bottom left of the red line.

Upvotes: 3

Views: 5019

Answers (2)

oezguensi
oezguensi

Reputation: 950

Just to help others who are looking for an implementation of marker-end in React:

Your code is totally correct!

There is most likely another problem. Perhaps a different element is on top of your <line>. You could check that for example by giving all of your elements an opacity attribute.

Upvotes: 0

Pavan Teja
Pavan Teja

Reputation: 3202

keep your <defs> tag inside svg element

<defs>
  <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
    <path d="M2,2 L2,11 L10,6 L2,2" />
  </marker>
</defs>
<svg width=200 height=200>
  <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600; marker-end: url(#markerArrow)" />

</svg>



<svg width=200 height=200>
  <defs>
    <marker id="markerArrow1" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
      <path d="M2,2 L2,11 L10,6 L2,2" />
    </marker>
  </defs>
  <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600; marker-end: url(#markerArrow1)" />

</svg>

if this didnt work,try moving <defs> outside of react component and place in seperate svg in the page.you can check the implementation here

Upvotes: 2

Related Questions