如何将SVG marker填充色作为参数从visx line组件传入？

首先明确：SVG原生不支持url(#triangle("fff"))这种带参数的marker引用方式，以下是三种可行的实现方案：

1. 使用currentColor实现颜色同步（最简单方案） #

currentColor是CSS内置关键字，会自动继承当前元素的color属性值。利用这一特性可以轻松实现marker填充色与线条stroke颜色的同步：

修改Marker代码 #

将path的fill属性设置为currentColor：

<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="currentColor" />
</marker>

修改Line组件代码 #

让line的color属性与stroke颜色保持一致，marker会自动继承这个颜色作为填充色：

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

更简洁的写法是直接用currentColor作为stroke的值：

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

2. 动态生成对应颜色的Marker #

如果需要更精细化的控制，可以根据线条类型动态生成带有唯一ID的marker，每个marker对应固定填充色：

动态渲染Marker #

{["A", "B"].map(type => (
  <marker
    key={`triangle-${type}`}
    id={`triangle-${type}`}
    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={type === "A" ? "#fff" : "#000"} 
    />
  </marker>
))}

Line组件调用对应Marker #

<line
  x1={source.x}
  y1={source.y}
  x2={target.x}
  y2={target.y}
  stroke={type === "A" ? "#fff" : "#000"}
  marker-end={`url(#triangle-${type})`}
/>

3. 使用CSS变量传递颜色值 #

通过CSS变量来传递颜色，让marker的fill属性引用该变量，实现颜色动态绑定：

定义Marker并引用CSS变量 #

<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="var(--marker-color)" />
</marker>

Line组件设置CSS变量 #

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

内容的提问来源于stack exchange，提问作者chung