悬停链接并在 SVG 中更改颜色 [重复]答案

【问题标题】：Hover a link and change color in SVG [duplicate]悬停链接并在 SVG 中更改颜色 [重复]
【发布时间】：2015-02-07 13:26:47
【问题描述】：

我创建了一个 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');
            });

【问题讨论】：

什么不起作用，示例链接对我来说似乎没问题。如果它不起作用，请更详细地解释您的期望
是的，但是这个例子不是我的项目，我正在构建一个类似的地图。但是，当我将鼠标悬停在地图旁边菜单中的相关链接上时，我无法更改地图上的颜色。所以有些东西似乎不起作用，我尝试了一切，当我将鼠标悬停在 #maplink01 超链接上时，无法更改 #mapimg01 路径中的填充颜色。

标签： javascript jquery html css svg

【解决方案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;");
});

【讨论】：