在 html 中更改 svg 的筆划顏色

Question

我對此完全不知所措。 我正在嘗試為一級方程式賽道創建一個 svg，它會在鼠標懸停時突出顯示賽道的各個扇區。 我在 SVG（Sector_1、Sector_2、Sector_3）中分隔了扇區，但是，當我用鼠標在這些扇區上 hover 時，我似乎找不到改變這些扇區顏色的方法。 我已將 SVG 中的顏色設置為 class（參見代碼）。 默認值為 st0，我已將每個扇區的 hover 顏色設置為扇區 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 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 600 450" style="enable-background:new 0 0 600 450;" xml:space="preserve"> <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>