How can I pass the fill color of marker as a parameter

65 Views Asked by At

I have a marker acting as the pointer end of a line to make an arrow:

<marker
  id="triangle"
  viewBox="0 0 4 4"
  refX="10" 
  refY="5" 
  markerUnits="strokeWidth"
  markerWidth="10"
  markerHeight="10"
  orient="auto"
>
  <path d="M 0 0 L 10 5 L 0 10 z" fill=TO HERE />
</marker>

I am calling it like so from the line

<line
  x1={source.x}
  y1={source.y}
  x2={target.x}
  y2={target.y}
  stroke={
    type === "A" ? "#fff"
    : type === "B" ? "#000"
  } // color of line
  marker-end="url(#triangle)" CALLING IT FROM HERE
/>

How can I pass the fill the marker should be from the line based on the color of line? Can I do something like url(#triangle("fff")) or something like that?

The line is the link component from https://airbnb.io/visx/network . marker is svg, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

0

There are 0 best solutions below