为什么SVG悬停brightness效果仅对第一个path路径生效？

问题原因与解决方案 #

1. 第二个半圆hover无响应的问题 #

核心原因是路径事件捕获规则受层叠关系影响：你的SVG路径绘制顺序是.cls-1在前、.cls-2在后，.cls-2的路径边界框覆盖了整个SVG视口，即便未填充的透明区域，部分浏览器也会错误捕获hover事件，遮挡住下层路径的事件响应。
修复方案：给所有路径添加pointer-events: fill配置，仅让路径的填充区域响应鼠标事件即可：

svg path {
  pointer-events: fill;
}
.cls-1:hover, .cls-2:hover {
  filter: brightness(140%);
}

2. 外部CSS修改填充色被SVG内部样式覆盖的问题 #

SVG <defs> 内定义的样式和外部CSS同类选择器优先级相同，遵循「后定义生效」的规则，如果你的外部CSS加载顺序早于SVG内部样式，就会被覆盖。
修复方案：使用更高优先级的选择器即可覆盖内部样式，比如添加标签名限定：

/* 优先级高于内部的 .cls-1 选择器 */
svg .cls-1 {
  fill: #自定义颜色值;
}
svg .cls-2 {
  fill: #自定义颜色值;
}

完整可运行示例代码 #

svg path {
  pointer-events: fill;
}
/* 悬停发光效果 */
svg .cls-1:hover, svg .cls-2:hover {
  filter: brightness(140%);
}
/* 自定义填充色，不需要可以删除 */
svg .cls-1 {
  fill: #fbb03b;
}
svg .cls-2 {
  fill: #f0f;
}

<div class="container">
<svg id="Layer_3" data-name="Layer 3" height="500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.63 166.83">
  <path class="cls-1" id="hcircle" d="M739.09,372.27a90.19,90.19,0,1,1-135-98.74l10.22,17a70,70,0,1,0,104.17,76.57Z" transform="translate(-561.46 -273.53)"/>
  <path class="cls-2" d="M696.06,297.36l-13.14,15a50,50,0,1,1-74.52,65.35l-16.53,11a70,70,0,1,0,104.19-91.39Z" transform="translate(-561.46 -273.53)"/>
</svg>
</div>

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