SVG：通过悬停另一个矩形来颜色（填充）矩形

Question

我需要你的帮助！

我希望能够将我的SVG图形的左侧部分（lightgrey部分）悬停。在悬停时，我希望 id =“margin-bottom”的矩形填充为红色。

链接到我的问题：http://cssdeck.com/labs/sjhr6oat

为什么我无法这样做？这不是那么困难。感谢大家的帮助！

Answer 1

我猜你只需将鼠标悬停在第二个矩形上就可以更改第一个矩形的填充属性。

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 2

这是一个工作页面：http://cssdeck.com/labs/4r8hitea 基本上它与使用jQuery的World Bright的代码相同

Answer 3

有三种可能性：

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>

这是IMO非常优雅的解决方案，但不幸的是，SMIL并不是一贯支持的。