html - 将鼠标悬停在 SVG 图像 CSS 的特定区域

Question

我有一个 SVG 图像(snipp 被缩短了)，我想在鼠标悬停时突出显示每个 path。

    <svg width="480" height="660" xmlns="http://www.w3.org/2000/svg">
 <metadata id="metadata31">image/svg+xml</metadata>
    <g>
      <title>Karta</title>
      <g id="g4436">
       <path fill="#C5EF6E" fill-rule="evenodd" stroke="#000000" stroke-width="0.1" stroke-linecap="square" stroke-miterlimit="4" id="Norrbotten" d="m396.27551,46.7125l-6.5,15.875l-5.625,5.0625l-3.43753"/>
       <path fill="#C5EF6E" fill-rule="evenodd" stroke="#000000" stroke-width="0.1" stroke-linecap="square" stroke-miterlimit="4" id="Lappland" d="m346.77551,10.15l-7.875,1.4375l3.81247,5.25l0.75003,5.0625l-1.375,6.0625l-2.3125"/>
    </g>
     </g>
    </svg>

但我不知道如何用 CSS 做到这一点。

当鼠标悬停在整个 SVG 上时，此代码片段使 path ID:Lappland 将颜色更改为 #111。

svg:hover #Lappland{ 
  fill: #111;
}

如何使用 CSS 更改具有唯一 ID 的特定 路径 的颜色？

Answer 1

您在错误的元素上设置了悬停。将鼠标悬停在 svg 中的特定 ID 上。

svg #Lappland:hover { 
  fill: #111;
}