Firefox下SVG hover切换时光标异常（出现水平条）问题求助

你遇到的是Firefox浏览器处理SVG元素hover状态切换时的渲染闪烁问题——快速在多个SVG间移动光标会触发频繁重绘，进而出现水平条异常。结合你的场景，给你几个可行的解决办法：

• 添加will-change属性提前告知浏览器渲染变化
  在SVG的基础样式里加上will-change: fill，让浏览器提前为fill属性的变化做好渲染准备，减少重绘时的异常：

  .right > div > svg {
    will-change: fill;
  }
  .right > div > svg:hover {
    cursor: pointer;
    fill: orange;
  }
  

• 改用SVG内部样式控制初始fill值
  如果外部CSS触发的重绘仍有问题，可以把初始fill值直接写在SVG内部的元素上（比如<path fill="#你的初始颜色">），再用外部CSS修改hover状态，这样浏览器的重绘逻辑会更稳定。

• 拆分hover状态的属性修改（临时 workaround）
  要是上面的方法没生效，可以把cursor属性移到SVG的基础样式里，只在hover时修改fill，减少一次状态切换的重绘触发：

  .right > div > svg {
    cursor: pointer;
  }
  .right > div > svg:hover {
    fill: orange;
  }
  

这些方法都是针对Firefox的渲染机制优化，能有效解决快速hover切换时的闪烁问题。

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