Hover a link and change color in SVG

Question

I have created a SVG map, I want to change color on the targeted area of the map when i hover over a link. When i hover over a area on my map, the link get the underline class from jQ and the CSS hover effect change the fill color on the map. But when i hover over the link my SVG area dont get the fill color. Im stuck and hope you guys can help me.

Here you can see an example of my goal: http://www.blocket.se/

CSS:

path:hover{ fill: #FEFF7F !important; }
.svgcolor{ fill: #FEFF7F !important; }
.underline{ font-weight:600; text-decoration: underline; }

HTML:

<li id="maplink01"><a href="#" title="Text" target="_blank">Text</a></li>

SVG:

<a xlink:href="http://www.google.com" target="_blank">
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="393.5261" y1="226.1426" x2="446.614" y2="226.1426">
<stop offset="0" style="stop-color:#E7ECF9" />
<stop offset="1" style="stop-color:#C4CFE1" />
</linearGradient>
<path id="mapimg01" style="fill:url(#SVGID_5_);stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;" d="M440.333,216... /></a>

jQ:

//This works fine:
            $("#mapimg01").hover(function () {
                $("#maplink01").addClass('underline');
            }, function () {
                $("#maplink01").removeClass('underline');
            });
//This does not work:
            $("#maplink01").hover(function () {
                $("#mapimg01").addClass('svgcolor');
            }, function () {
                $("#mapimg01").removeClass('svgcolor');
            });

What's not working, the example link seems OK to me. If it's not working please explain in more detail what you expect — Robert Longson, Dec 09 '14 at 15:41
Yes, but the example is not my project, im building a similar map. But i cant get the color on the map to change when i hover over the associated link in the meny next to the map. So something doesn't seems to work and i tried everything, cant get the fill color in the #mapimg01 path to change when i hover over the #maplink01 hyperlink. — Patrik Asplund, Dec 09 '14 at 16:01

Patrik Asplund · Answer 1 · 2014-12-09T18:27:33.997

Well, i solved the problem. I could not add-/removeClass to the SVG, had to use setAttribute("style", "fill:..."). I tried this solution before, but obviously i could not use jQuerys $´sign, had to use the whole document.getElementById. Why? I dont know:) The solution look like this:

var mapImg = document.getElementById("mapimg01");

$("#maplink01").hover(function () { 

mapImg.setAttribute("style", "fill:#FEFF7F; stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;");
}, 

function () {


mapImg.setAttribute("style", "fill:url(#SVGID_5_); stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;");
});

Hover a link and change color in SVG

1 Answers1