Question

我正在尝试创建交互式SVG-Map。我将代码从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来制作动画。

Here you can find a 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;
}

Updated 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"/>

在脚本部分添加以下内容:(并将加载类型更改为head）

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

PS：或者您可以使用JQuery，Link Here＆lt; ..并在框架和扩展程序中选择JQuery

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

3 个答案: