Svg defs encapsulation

Question

I\'m trying to encapsulate an SVG line with an arrowhead at the end without any global ids in a React component, (but the question itself has nothing to do with React).

Answer 1

You have a few choices:

1. Pull the marker definition(s) out into a static SVG that is referenced by all LinkComponents, or

2. Generate a random, unique id each time.

3. Add the colour to the id, so even if you have duplicate marker definitions, it doesn't matter which one is referenced:

   id="arrow-{color}"
   

4. Don't use markers. Draw the arrowhead yourself.