在 html 中更改 svg 上的描边颜色

Question

我对此完全不知所措。我正在尝试为一级方程式赛道创建一个 svg，当鼠标悬停在上面时，它会突出显示赛道的各个部分。我在 SVG 中将扇区分开（Sector_1、Sector_2、Sector_3）但是，当我将鼠标悬停在这些扇区上时，我似乎无法找到改变这些扇区颜色的方法老鼠。我已将 SVG 中的颜色设置为 class（请参阅代码）。默认值为 st0，我已将每个扇区的悬停颜色设置为扇区 1 为 st1，扇区 2 为 st2，扇区 3 为 st3。有人可以帮助我或为我指明正确的方向吗？

<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 class="st0" 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 class="st0" 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 class="st0" 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>

Answer 1

纯CSS解决方案。将您的 .st0 选择器替换为 id>path:hover 选择器，并且它起作用了（在您将道路颜色从白色更改为可见颜色后！）。

<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 class="st0" 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 class="st0" 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 class="st0" 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>

在 html 中更改 svg 上的描边颜色

Change stroke colour on svg in html

html

svg

hover