Изменение цвета пути SVG и подчеркивание href

Question

Im пытается изменить цвет как 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

Я не знаю, можно ли вызвать :hover в пределах javascript. Поэтому вместо этого я просто добавил class.

CSS

svg .Norrbotten:hover, svg .Norrbotten.hovered { fill: #408927; } 
svg .Lappland:hover, svg .Lappland.hovered { fill: #408927; } 

a { text-decoration: none; } 
a:hover, a.hovered { text-decoration: underline; } 

JQuery

$('.Norrbotten').hover(
    function() { 
    $('.Norrbotten').addClass('hovered'); 
    }, function() { 
    $('.Norrbotten').removeClass('hovered'); 
    } 
); 

$('.Lappland').hover(
    function() { 
    $('.Lappland').addClass('hovered'); 
    }, function() { 
    $('.Lappland').removeClass('hovered'); 
    } 
); 

JSFiddle

Answer 2

Поместите SVG внутри <a> и сделать a:hover .Norrbotten {fill:red;}