我完全不知所措。我正在嘗試為 Formula 1 軌道創建一個 svg，當滑鼠懸停在上面時，它會突出顯示軌道的各個部分。我在 SVG（Sector_1、Sector_2、Sector_3）中將扇區分開，但是，當我用滑鼠懸停在這些扇區上時，我似乎找不到改變它們顏色的方法。我已經將 SVG 中的顏色設定為一個類（參見代碼）。默認值為 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>uj5u.com熱心網友回復：
純 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/400991.html