SVG交互式地图CSS问题：<g>标签下元素无法整体高亮

核心修复逻辑 #

把hover触发绑定到<g>容器上，而非单个子元素，这样鼠标只要碰到整个组的任意区域，所有子元素都会同步触发样式变化。

具体修改方案 #

1. 调整CSS选择器 #

替换原来针对子元素class的hover规则，改成监听父容器的hover状态，再选中其下所有子元素：

#seat_714_1:hover * {
    fill: red;
}

如果想精准匹配带指定class的子元素，也可以用：

#seat_714_1:hover .seat_714_1 {
    fill: red;
}

2. 简化SVG结构（可选） #

如果子元素不需要单独的class样式，可以删掉所有子元素的class="seat_714_1"，直接通过父容器控制，代码更清爽：

<g id="seat_714_1">
    <path d="M823.4,113.4h3.4c0.8,0,1.5-0.7,1.5-1.5v-4.6c0-0.8-0.7-1.5-1.5-1.5h-3.4c-0.8,0-1.5,0.7-1.5,1.5v4.6
    C821.9,112.8,822.6,113.4,823.4,113.4z"/>
    <rect x="831.2" y="97.9" width="12.2" height="23.4"/>
    <rect x="823.1" y="104" width="3.3" height="1.1"/>
    <rect x="820.6" y="108.3" width="3.3" height="2.6"/>
    <rect x="819.7" y="106.8" width="1.1" height="5.6"/>
    <rect x="823.1" y="114.1" width="3.3" height="1.1"/>
</g>

对应的CSS保持#seat_714_1:hover * { fill: red; }即可。

3. 补全hover触发区域（可选） #

如果子元素之间存在空白，鼠标移到空白处不会触发hover，可以给<g>加一个透明的背景矩形，覆盖整个组的范围，确保触发区域连续：

<g id="seat_714_1">
    <!-- 透明背景矩形，放在最底层 -->
    <rect x="819.7" y="97.9" width="23.7" height="17.3" fill="transparent"/>
    <!-- 原有的path和rect元素 -->
    <path d="M823.4,113.4h3.4c0.8,0,1.5-0.7,1.5-1.5v-4.6c0-0.8-0.7-1.5-1.5-1.5h-3.4c-0.8,0-1.5,0.7-1.5,1.5v4.6
    C821.9,112.8,822.6,113.4,823.4,113.4z"/>
    <rect x="831.2" y="97.9" width="12.2" height="23.4"/>
    <rect x="823.1" y="104" width="3.3" height="1.1"/>
    <rect x="820.6" y="108.3" width="3.3" height="2.6"/>
    <rect x="819.7" y="106.8" width="1.1" height="5.6"/>
    <rect x="823.1" y="114.1" width="3.3" height="1.1"/>
</g>

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