多按钮场景下SVG Marker悬停样式异常问题咨询

我在按钮内嵌入了如下SVG组件：

<button>
 Checkout
 <ArrowSvg />
</button>

其中ArrowSvg的代码如下（线条拥有类名svg-line）：

<svg fill="none" stroke="#000">
  <defs>
    <marker id="m" overflow="visible">
      <path d="M-4,-4L0,0 -4,4" />
    </marker>
  </defs>
  <line x1="0" y1="50%" x2="100%" y2="50%" marker-end="url(#m)" class="svg-line" />
</svg>

我设置了按钮悬停时修改SVG线条的描边颜色：

.btn:hover > .svg-line {
  stroke: blue;
}

单个按钮时，悬停后箭头（线条及箭头头部）可正常变为蓝色。但当页面存在多个该按钮时，悬停其中一个按钮会导致所有按钮的SVG箭头头部（即Marker中的path）样式被影响。由于需要调整箭头宽度，我必须使用line元素，无法改用path实现。请问该问题的原因是什么？我遗漏了哪些配置？

原因分析 #

• SVG的marker元素通过ID引用，而ID在整个HTML文档中是全局唯一的。当页面存在多个相同ID的marker时，浏览器只会识别第一个定义的实例，后续的marker会被忽略。所有按钮的line元素实际上都在复用同一个全局marker，因此只要有一个按钮触发了stroke样式修改，这个共享的marker样式就会被改变，导致所有箭头头部同步变化。
• marker的样式默认继承自引用它的元素（这里是line），但因为所有line都指向同一个全局marker，任何一个line的样式变更都会作用到这个公共实例上。

解决办法 #

1. 为每个marker生成唯一ID #

在渲染ArrowSvg组件时，为每个实例的marker生成唯一ID，确保每个按钮的SVG拥有独立的marker实例。比如在React中可以使用内置的useId()钩子：

import { useId } from 'react';

function ArrowSvg() {
  const markerId = useId();
  return (
    <svg fill="none" stroke="#000">
      <defs>
        <marker id={markerId} overflow="visible">
          <path d="M-4,-4L0,0 -4,4" />
        </marker>
      </defs>
      <line x1="0" y1="50%" x2="100%" y2="50%" marker-end={`url(#${markerId})`} className="svg-line" />
    </svg>
  );
}

这样每个按钮的箭头头部都对应独立的marker，样式修改只会作用于当前按钮的箭头。

2. 用CSS变量同步线条与Marker颜色 #

结合唯一ID的同时，使用CSS变量统一控制线条和marker的描边颜色，确保样式同步且不互相干扰：

.btn {
  --arrow-stroke: #000;
}
.btn:hover {
  --arrow-stroke: blue;
}

修改SVG代码，让marker也引用CSS变量：

<svg fill="none" stroke="var(--arrow-stroke)">
  <defs>
    <marker id={markerId} overflow="visible" stroke="var(--arrow-stroke)">
      <path d="M-4,-4L0,0 -4,4" />
    </marker>
  </defs>
  <line x1="0" y1="50%" x2="100%" y2="50%" marker-end={`url(#${markerId})`} className="svg-line" />
</svg>

显式给marker设置stroke变量，避免样式继承带来的意外问题，同时保证每个独立marker的颜色随按钮状态变化。

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