CSS not affecting everything under <g>

jb15 0
Viewed 34

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 class="seat_714_1" 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" class="seat_714_1" width="12.2" height="23.4"/>
        <rect x="823.1" y="104" class="seat_714_1" width="3.3" height="1.1"/>
        <rect x="820.6" y="108.3" class="seat_714_1" width="3.3" height="2.6"/>
        <rect x="819.7" y="106.8" class="seat_714_1" width="1.1" height="5.6"/>
        <rect x="823.1" y="114.1" class="seat_714_1" width="3.3" height="1.1"/>
</g>

.seat_714_1:hover{
    fill: red;
}
svg css html
1 Answers

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 class="seat_714_1" 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" class="seat_714_1" width="12.2" height="23.4"/>
        <rect x="823.1" y="104" class="seat_714_1" width="3.3" height="1.1"/>
        <rect x="820.6" y="108.3" class="seat_714_1" width="3.3" height="2.6"/>
        <rect x="819.7" y="106.8" class="seat_714_1" width="1.1" height="5.6"/>
        <rect x="823.1" y="114.1" class="seat_714_1" width="3.3" height="1.1"/>
</g>
</svg>

Robert Longson0
Related