Change stroke colour on svg in html-CodePudding

I'm at a complete loss with this. I am trying to create an svg for Formula 1 tracks which highlights the various sectors of the track when the mouse hovers over. I have the sectors separated in the SVG (Sector_1, Sector_2, Sector_3) however, I cannot seem to find a way to change the colour of these sectors when I hover over them with the mouse. I've set up the colours in the SVG as a class (see code). The default is st0, and I've set up the hover colours for each sector as st1 for Sector 1, st2 for Sector 2 and st3 for Sector 3. Can someone help me or point me in the right direction.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 504 347.1" style="enable-background:new 0 0 504 347.1;" xml:space="preserve">
    <style type="text/css">
        .st0{fill:none;stroke:#FFFFFF;stroke-width:5;}
        .st1{fill:none;stroke:red;stroke-width:5;}
        .st2{fill:none;stroke:blue;stroke-width:5;}
        .st3{fill:none;stroke:yellow;stroke-width:5;}
    </style>
    
    <g id="Sector_3">
            <path  d="M292.6,106.7c8.7-22.8,11-30.5,24.6-57.7c5.5-11,8.9-13.9,15.6-16.6c7.9-3.2,10.5-0.5,13,0.4
                c5.3,1.9,35.4,40,35.4,40c0.8,1.9,119.4,235,119.4,235c2.8,7.7-1,11.3-7.7,21.3c-10.7,15.8-28.6,15.5-28.6,15.5H281"/>
    </g>
    
    <g id="Sector_2">
            <path  d="M141.2,65.7c21.5,23,36.5,13.5,46.5,34.5c8.8,18.5-10.7,41.9-5,53c6.3,12.3,18.3,19.1,23.5,23
                c4.7,3.5,49.2,34.3,54.7,38.4c5.5,4.1,3.7,11.4-1.8,14.9c-7,4.4-17.7,2.4-22.2,1.7s-89.8-12-89.8-12c-4.1-0.6-8.2-1-12.4-1.2
                c-7.7-0.2-17.3,1.3-26.2,11.3c-8.4,9.4-16.4,19.1-13.9,25.4c3,7.4,57,9.6,57,9.6h234c0,0,10.2-0.7,14.7-7.4
                c4.5-6.7,10-24.8,0-44.9c-2.2-4.4-15.4-26.4-36.3-34.1c-20.2-7.5-32-9.8-47.5-18.9c-12.4-7.2-20.3-11.4-24.4-19.3
                c-6-11.5-1.6-27.5,0.5-33"/>
    </g>
    
    <g id="Sector_1">
        <path  d="M313.5,344.6H16.8c0,0-11.4,0-13.7-6.8c-1.9-5.6,0.8-8.8,4.7-12.2c3.6-3.1,28.8-22.7,30.2-24.3
            s8.8-8.6,5.8-19.1c-0.6-2.2-6-19.2-11.8-38.2c-0.7-2.3-2.4-7.5-0.1-20.3c0,0,29.8-199.1,32.7-214.6c1.5-7.9,7.5-7.8,13-4.7
            c10.4,5.9,17.1,9.7,25.1,18.6c0,0,31,34.6,38.5,42.6"/>
    </g>
    </svg>

CodePudding user response：

A pure CSS solution. Replace your .st0 selectors with id>path:hover selectors, and it works (after you change the road colour from white to something visible!).

<svg style="width:300px;height:180px" viewbox="0 -50 500 400">
    
    <style type="text/css">
        .st0{fill:none;stroke:#222;stroke-width:13;}
        #Sector_3>path:hover{fill:none;stroke:red;stroke-width:15;}
        #Sector_2>path:hover{fill:none;stroke:blue;stroke-width:15;}
        #Sector_1>path:hover{fill:none;stroke:yellow;stroke-width:15;}
   </style>

   <g id="Sector_3">
       <path  d="M292.6,106.7c8.7-22.8,11-30.5,24.6-57.7c5.5-11,8.9-13.9,15.6-16.6c7.9-3.2,10.5-0.5,13,0.4
        c5.3,1.9,35.4,40,35.4,40c0.8,1.9,119.4,235,119.4,235c2.8,7.7-1,11.3-7.7,21.3c-10.7,15.8-28.6,15.5-28.6,15.5H281"/>
   </g>
   <g id="Sector_2"> 
       <path  d="M141.2,65.7c21.5,23,36.5,13.5,46.5,34.5c8.8,18.5-10.7,41.9-5,53c6.3,12.3,18.3,19.1,23.5,23
                c4.7,3.5,49.2,34.3,54.7,38.4c5.5,4.1,3.7,11.4-1.8,14.9c-7,4.4-17.7,2.4-22.2,1.7s-89.8-12-89.8-12c-4.1-0.6-8.2-1-12.4-1.2
                c-7.7-0.2-17.3,1.3-26.2,11.3c-8.4,9.4-16.4,19.1-13.9,25.4c3,7.4,57,9.6,57,9.6h234c0,0,10.2-0.7,14.7-7.4
                c4.5-6.7,10-24.8,0-44.9c-2.2-4.4-15.4-26.4-36.3-34.1c-20.2-7.5-32-9.8-47.5-18.9c-12.4-7.2-20.3-11.4-24.4-19.3
                c-6-11.5-1.6-27.5,0.5-33"/>
   </g>
   <g id="Sector_1">
       <path  d="M313.5,344.6H16.8c0,0-11.4,0-13.7-6.8c-1.9-5.6,0.8-8.8,4.7-12.2c3.6-3.1,28.8-22.7,30.2-24.3
            s8.8-8.6,5.8-19.1c-0.6-2.2-6-19.2-11.8-38.2c-0.7-2.3-2.4-7.5-0.1-20.3c0,0,29.8-199.1,32.7-214.6c1.5-7.9,7.5-7.8,13-4.7
            c10.4,5.9,17.1,9.7,25.1,18.6c0,0,31,34.6,38.5,42.6"/>
   </g>
</svg>