SVG中:hover与链接配合clip-path在Firefox浏览器失效问题问询

这是Firefox内核与Webkit内核（Chrome、Edge等）对SVG元素可交互区域的判定规则差异导致的：

• 你的代码中存在clip-path自引用循环：给<path>元素应用了clip-path="url('#triangle-clip')"，而#triangle-clip这个裁剪路径内部又通过<use>直接引用了当前这个<path>元素本身。
• Firefox在计算这类自引用裁剪元素的鼠标事件命中区域时，会判定循环引用无效，直接将元素的可交互区域标记为空，因此:hover伪类不会触发，外层包裹的<a>链接点击也无法响应；Chrome对这类场景做了额外兼容，识别到裁剪形状与元素本身形状完全一致，就会正常识别命中区域。

• 方案1：避免裁剪路径引用当前应用裁剪的元素，直接把形状参数复制到clipPath内部，替换原有use引用即可解决：

<clipPath id="triangle-clip">
  <path d="M150 0 L75 200 L225 200 Z" />
</clipPath>

• 方案2：将clip-path属性从内部的path元素移动到外层的<a>标签上，也可以避开Firefox的循环引用判定逻辑。
• 方案3：如果需要复用形状定义，可以将path的d属性值提取为CSS自定义属性或者JS变量，分别给元素和裁剪路径赋值，不要直接做DOM层面的引用。

内容的提问来源于stack exchange，提问作者Mark-S