如何让SVG组的所有子元素在hover时改变填充颜色？

直接给.sgroup:hover设置fill属性不会生效，因为<g>标签本身没有填充样式，而它的子元素（比如示例里的<circle>）都自带了fill属性，优先级更高。用.sgroup circle:hover只能让鼠标直接指向的单个圆形变色，没法实现整组同步切换颜色的效果。

可行的解决方案 #

通过选择悬停状态下group内的所有目标子元素，就能实现整组同步变色：

修改后的CSS代码 #

/* 针对组内所有circle元素生效 */
.sgroup:hover circle {
    fill: green;
}

/* 如果组内有多种图形元素，用这个选择器统一选中所有子元素 */
/* .sgroup:hover * {
    fill: green;
} */

对应的HTML代码（无需修改） #

<div>
<svg width="200" height="200">
    <g class="sgroup">
        <circle cx="50" cy="50" fill="pink" r="10"></circle>
        <circle cx="150" cy="150" fill="purple" r="10"></circle>
    </g>
</svg>
</div>

原理说明 #

当鼠标悬停在.sgroup这个<g>元素上时，.sgroup:hover circle选择器会精准选中组内所有<circle>元素，覆盖它们原本的fill属性，实现全组同步变色。如果组内包含其他类型的SVG图形（比如矩形、路径），用.sgroup:hover *就能一次性选中所有子元素，统一修改填充色。

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