SVG <marker>能否从引用的<line>继承颜色？优化动态样式方案

核心结论 #

SVG <marker> 完全可以从引用它的 <line> 元素继承颜色，无需为每种颜色+状态组合创建独立marker，关键是正确利用 currentColor 属性。

一、用 currentColor 复用marker（最优方案） #

你之前对 currentColor 的理解有误：只要marker定义中使用 currentColor，它会自动继承引用它的元素（即你的<line>）的color属性值，而非顶层SVG的颜色。这样只需按状态（3种）创建3个marker即可，不用管20种颜色。

修改后的代码示例：

// 只按状态创建marker，无需传入color
function makeDefs(defs: Selection<SVGDefsElement, unknown, null, undefined>, status: string) {
  const markerSize = 3;

  const start = defs.append('marker')
    .attr('id', `arrow-start-${status}`)
    .attr('viewBox', '-5 -10 20 20')
    .attr('markerWidth', markerSize)
    .attr('markerHeight', markerSize)
    .attr('orient', 'auto-start-reverse');
  
  start.append('path')
    .attr('d', status === 'PUBLISHED' ? customPaths.arrowLarge : customPaths.arrowSmall)
    .attr('stroke', 'currentColor') // 继承引用元素的color
    .attr('fill', 'currentColor');
}

// 调用时只需传入状态
makeDefs(defs, 'DRAFT');
makeDefs(defs, 'PUBLISHED');
makeDefs(defs, 'OTHER_STATUS');

然后为线条设置颜色并引用marker：

line
  .attr('color', d => d.color) // 为line设置color属性，供marker继承
  .attr('stroke', d => d.color) // 同时设置line自身的stroke颜色
  .attr('marker-start', d => `url(#arrow-start-${d.status})`);

二、关于用<svg>包裹的可行性 #

你提到的用<svg>包裹<line>并单独定义defs的方案是可行的，但完全没必要——这种方式会生成大量重复的defs和svg节点，增加DOM复杂度，远不如currentColor方案高效简洁。

补充说明 #

目前SVG规范不支持在设置marker-start时直接传递颜色参数，但通过currentColor绑定元素的color属性，已经能完美实现“动态继承颜色”的需求，且代码更简洁易维护。

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