交互式SVG：将鼠标悬停在一个零件上，更改另一个零件的颜色

Question

我正在尝试创建交互式SVG地图。 我将Illustrator中的代码放入HTML中，甚至将鼠标悬停在它们上时，也设法更改了某些路径的填充。 我的问题是，我的路径前面有一个白色的矩形以及文本：当我将鼠标悬停在这些矩形上时，什么也没有发生。 我想改变那个。 我的目标是能够将鼠标悬停在文本/白色背景/路径上，并且路径将始终填充我的颜色（＃ff7bac）

这是我的SVG代码的一部分：

    <a xlink:href="http://travelalberta.com" id="wohnrauemeLink">
    <g id="wohnraeume">
        <g id="wohnraeumeFill">
            <g>
                <path class="eckig" d="M1169,124.5v341.1h429V124.5H1169z M1390.5,445h-199.4l0-68.7h71v33.9h128.4V445z"/>
            </g>
        </g>
        <polygon id="wohnrauemeWhite" fill="#FFFFFF" points="1191.3,445.6 1191.2,372.3 1262.3,372.3 1262.2,410.1 1391,411.3 
            1390.5,445.7                "/>
        </g>
</a>

而我的CSS：

path.eckig {
    fill: #FFFFFF;
    opacity: 0;
    transition: .6s fill;
      }

path.eckig:hover { 
    fill: #ff7bac;
    opacity: 1;
     }

我希望有人可以帮助我：我已经尝试了好几天了：我

********************编辑*********************

嘿：)我仍在设法弄清楚，所以这里是一个简化的版本：

https://jsfiddle.net/4tjzk8z5/11/

我的目标是当我将鼠标悬停在蓝色矩形上时能够更改红色矩形的颜色。

这次我尝试使用JS，但是它也不起作用：

function mouseoverblue(){
var myPara = document.getElementById("red");
myPara.style.color = "#123444";

}

非常感谢你的帮助

Answer 1

如果您可以将svg代码放在HTML页面中，建议您使用CSS制作动画。

在这里您可以找到一个jsFiddle

您的示例的CSS：

/* Colors the polygon where you are hovering it or the path */
#wohnraeumeFill:hover+polygon,
polygon:hover{
    fill: #800;
}

---

编辑

使用CSS时，您无法选择以前的兄弟姐妹，因此您必须更改SVG元素的顺序：

<svg>
    <g id="wohnraeume" transform="translate(-1100 -350)">

        <polygon id="wohnrauemeWhite" fill="#FFFFFF" points="1191.3,445.6 1191.2,372.3 1262.3,372.3 1262.2,410.1 1391,411.3 
            1390.5,445.7                "/>
        <g id="wohnraeumeFill">
            <g>
                <path class="eckig" d="M1169,124.5v341.1h429V124.5H1169z M1390.5,445h-199.4l0-68.7h71v33.9h128.4V445z"/>
            </g>
        </g>
    </g>
</svg>

并且您可以使用以下CSS规则：

polygon:hover + #wohnraeumeFill path{
    fill: #800;
}

更新了jsFiddle

Answer 2

如果您使用jQuery，它将像这样：

$('#svg1').on({
    mouseenter: function () {
        $('#svg2').css('fill', 'red');
    },
    mouseleave: function () {
        $('#svg2').css('fill', 'blue');
    }
});

其中#svg1和#svg2分别是#wohnraeumeFill和#wohnrauemeWhite 。

Answer 3

添加鼠标事件功能onmouseover来设置颜色，并添加onmouseout来重置颜色。

<rect id="blue" onmouseover="Img('#a02e3f')" onmouseout="Img('#123444')" x="753" y="375.3" fill="none" width="586.2" height="501.7"/>

在脚本部分中添加以下内容：（并将Load Type更改为head ）

function Img(color){
    document.getElementById("red").style.fill=color;
}

PS：或者您可以使用JQuery， 在此处链接 <.。然后在Frameworks and Extensions中选择JQuery