Chrome中SVG标记的context-stroke/context-fill失效，求替代方案？

针对你遇到的Chrome不支持stroke="context-stroke"的问题，这里有几种不用手动维护大量颜色对应标记的替代方案：

1. CSS变量 + 动态赋值 #

通过CSS变量传递线条颜色给全局标记，既能复用defs里的标记，又能让每个线条的标记匹配自身颜色：

<svg width="400" height="200">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--line-color)" stroke="var(--line-color)"/>
    </marker>
  </defs>
  <!-- 红色线条 -->
  <line x1="50" y1="50" x2="350" y2="50" stroke="#f00" stroke-width="2" marker-start="url(#arrow)" marker-end="url(#arrow)" style="--line-color: #f00;"/>
  <!-- 蓝色线条 -->
  <line x1="50" y1="100" x2="350" y2="100" stroke="#00f" stroke-width="2" marker-start="url(#arrow)" marker-end="url(#arrow)" style="--line-color: #00f;"/>
</svg>

如果线条是动态生成的，用JS给每条线的style属性添加--line-color即可，不用修改defs里的标记。

2. 内联标记定义 #

把标记直接内嵌到线条元素里，每个线条拥有独立的标记，避免全局defs的冲突问题：

<svg width="400" height="200">
  <line x1="50" y1="50" x2="350" y2="50" stroke="#f00" stroke-width="2">
    <marker id="arrow-red" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" stroke="#f00"/>
    </marker>
    <set attributeName="marker-start" to="url(#arrow-red)"/>
    <set attributeName="marker-end" to="url(#arrow-red)"/>
  </line>
  <line x1="50" y1="100" x2="350" y2="100" stroke="#00f" stroke-width="2">
    <marker id="arrow-blue" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#00f" stroke="#00f"/>
    </marker>
    <set attributeName="marker-start" to="url(#arrow-blue)"/>
    <set attributeName="marker-end" to="url(#arrow-blue)"/>
  </line>
</svg>

这个方法的缺点是代码冗余，但不需要担心全局标记的样式冲突，适合颜色不多的场景。

3. 利用currentColor属性 #

调整线条的颜色设置方式，用color属性控制颜色，然后标记用currentColor继承：

<svg width="400" height="200">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" stroke="currentColor"/>
    </marker>
  </defs>
  <line x1="50" y1="50" x2="350" y2="50" stroke="currentColor" color="#f00" stroke-width="2" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
  <line x1="50" y1="100" x2="350" y2="100" stroke="currentColor" color="#00f" stroke-width="2" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
</svg>

注意这里线条的stroke设为currentColor，而实际颜色通过color属性设置，标记会自动继承这个颜色值，Chrome对currentColor的支持很完善。

4. JS动态生成专属标记 #

如果颜色种类多且动态，可以用JS根据线条颜色自动生成对应的标记，并绑定到线条上：

// 获取所有需要添加标记的线条
const lines = document.querySelectorAll('line[data-marker]');
const defs = document.querySelector('svg defs');

lines.forEach(line => {
  const color = line.getAttribute('stroke');
  // 创建唯一标记ID
  const markerId = `arrow-${color.replace('#', '')}`;
  // 如果标记不存在，就创建
  if (!document.getElementById(markerId)) {
    const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
    marker.setAttribute('id', markerId);
    marker.setAttribute('viewBox', '0 0 10 10');
    marker.setAttribute('refX', '5');
    marker.setAttribute('refY', '5');
    marker.setAttribute('markerWidth', '6');
    marker.setAttribute('markerHeight', '6');
    marker.setAttribute('orient', 'auto-start-reverse');
    
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
    path.setAttribute('fill', color);
    path.setAttribute('stroke', color);
    marker.appendChild(path);
    defs.appendChild(marker);
  }
  // 给线条绑定标记
  line.setAttribute('marker-start', `url(#${markerId})`);
  line.setAttribute('marker-end', `url(#${markerId})`);
});

对应的SVG结构：

<svg width="400" height="200">
  <defs></defs>
  <line x1="50" y1="50" x2="350" y2="50" stroke="#f00" stroke-width="2" data-marker="true"/>
  <line x1="50" y1="100" x2="350" y2="100" stroke="#00f" stroke-width="2" data-marker="true"/>
</svg>

这个方案完全自动化，不用手动管理标记，适合动态生成大量不同颜色线条的场景。

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