1

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

chung
  • 835
  • 1
  • 7
  • 19
  • So `marker` and `line` are not React components, right? You won't be able to pass data from one to the other. You'd need to have the fill color as a property in a parent component. What's the app structure? – isherwood Dec 07 '22 at 23:47
  • It's sort of complicated , but basically I list nodes and links in separate arrays, containing the attributes of both (including color), and pass them into – chung Dec 08 '22 at 00:15
  • I supposed my only solution is to just create multiple pointers Apointer and Bpointer and call them based on A and B I guess. – chung Dec 08 '22 at 00:17

0 Answers0