Question

我创建了一个SVG地图，当我将鼠标悬停在链接上时，我希望更改地图目标区域的颜色。当我将鼠标悬停在地图上的某个区域上时，链接会从jQ获取下划线类，而CSS悬停效果会更改地图上的填充颜色。但当我将鼠标悬停在链接上时，我的SVG区域不会获得填充颜色。我卡住了，希望你们能帮助我。

在这里，您可以看到我的目标示例：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');
            });

Answer 1

好吧，我解决了这个问题。我无法添加/ removeClass到SVG，不得不使用setAttribute（“style”，“fill：...”）。我之前尝试过这个解决方案，但显然我不能使用jQuerys $'sign，不得不使用整个document.getElementById。为什么？我不知道:)解决方案看起来像这样：

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;");
});

在SVG中悬停链接并更改颜色

1 个答案: