CSS not affecting everything under <g>-CodePudding

I'm creating a interactive map using SVGs and I'm having trouble with my CSS not selecting all the elements under a specified tag. When I use a CSS selector such as hover, I want both the desk and chair to be selected, yet the desk and each separate component of the chair (a single arm, the back, etc..) get highlighted alone, not as a single object. I've even ensured that each sub layer in Illustrator is ungrouped. I've included a excerpt of both the HTML and the CSS.

<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>

.seat_714_1:hover{
    fill: red;
}

CodePudding user response：

The CSS id selector is #, . is a class selector.

#seat_714_1:hover{
    fill: red;
}

<svg viewBox="800 100 100 100">
<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>
</svg>