SVG：通過懸停另一個矩形的顏色（填充）矩形

Question

我需要你的幫助！

我想能夠懸停我的SVG圖形（lightgrey部分）的左側部分。在懸停時，我想要填充爲紅色的矩形的邊框爲id =「margin-bottom」。

鏈接到我的問題：http://cssdeck.com/labs/sjhr6oat

我爲什麼不能這樣做呢？這並不困難。感謝您的幫助！

Answer 1

有三種可能性：

1. 您需要將兩個元素都組合到一個公共的<g>元素中。懸停在元素上只能影響元素本身和子元素。
2. 您可以使用JavaScript
3. 你可以使用SMIL

CSS

<style type="text/css"> 
    #group:hover #to_be_colored_rect { 
    fill:red 
    } 
    /* If you don't want that the color changes when 
    hovering over to_be_colored_rect, then use this: */ 
    #to_be_colored_rect { 
    pointer-events:none; 
    } 
</style> 
<g id="group"> 
    <rect width="20" height="20"/> 
    <rect id="to_be_colored_rect" width="20" height="20" y="20"/> 
</g> 

的JavaScript

快速和骯髒的：

<rect width="20" height="20" 
    onmousemove="document.getElementById('to_be_colored_rect').setAttribute('fill','red')" 
    onmouseout="document.getElementById('to_be_colored_rect').removeAttribute('fill')"/> 
<rect id="to_be_colored_rect" width="20" height="20" y="20"/> 

（請將mousemove/mouseout事件處理爲生產單獨的腳本，這恰恰說明了基本原理。）

SMIL

<rect width="20" height="20" id="sensitive_rect"/> 
<rect width="20" height="20" y="20"> 
    <set attributeName="fill" attributeType="CSS" to="red" 
    begin="sensitive_rect.mousemove" end="sensitive_rect.mouseout"/> 
</rect> 

這是國際海事組織一個非常優雅的解決方案，但不幸的是，SMIL是不是很一貫支持。

Answer 2

我想你可以簡單地改變第一個矩形的填充屬性，當你把鼠標懸停在第二個矩形上。

HTML

<rect onmouseover="turnred()" onmouseout="turnwhite()" id="margin_left" width="40" height="420"/> // Replace line 7 with this line 

的Javascript

function turnred() { 
    document.getElementById("margin_bottom").style.fill="red"; 
} 

function turnwhite() { 
    document.getElementById("margin_bottom").style.fill="white"; 
} 

Answer 3

這裏有一個工作頁面：http://cssdeck.com/labs/4r8hitea 基本上是相同的代碼作爲世界光明的使用jQuery