jquery - 更改 SVG 路径的颜色，并在 href 下划线

Question

我正在尝试更改 SVG 路径的颜色，同时在 href 下划线。

如果我将鼠标悬停在 SVG 路径上，它会更改填充颜色。但是，我还想添加一个相应的 href，如果它悬停，它应该下划线，并且 SVG 路径应该更改填充颜色。

    <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>

还有风格

svg #Norrbotten:hover{
    fill: #408927;
}
svg #Lappland:hover{
    fill: #408927;
}

目前的 URL 是这样的:

<a href="#" class="Norrbotten">Norrbotten</a>
<a href="#" class="Lappland">Lappland</a>

但是要走的路也许是添加一个类？用 jQuery 来做吗？

我的问题

如何更改 SVG 路径的填充颜色，同时 href 带有下划线？

如果SVG路径悬停，href如何加下划线？

Answer 1

将 SVG 放入 <a> 中并做a:hover .Norrbotten {fill:red;}