交互式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