如何将鼠标悬停在SVG rect上？

Question

在这个SVG(尝试在FF 8,Safari 5.1.2,Chrome 16,全部在Mac上),当鼠标移动到栏上时,没有一个浏览器正确检测每个鼠标上/下事件,有时它工作有时它不会.但它在所有浏览器中都是一致的,所以它可能与SVG代码有关.使用onmouseover并onmouseout给出相同的结果 - 无法正常工作.

在SVG rect角度悬停时实现的正确方法是什么？

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="600" version="1.1" style="display:inline">

<style type="text/css">
.bar {
    fill: none;
}
.bar:hover { 
    fill: red;
}
</style>
  <g>
   <rect class="bar" x="220" y="80" width="20" height="180" stroke="black" stroke-width="1" />
  </g>
</svg>

Answer 1

发生的事情是没有检测到鼠标事件,因为填充是"无",只需添加:

.bar {
    fill: none;
    pointer-events: all;
}

然后它工作得很好.

Answer 2

fill: none; pointer-event: all;应该可以在大多数现代浏览器中使用，但IE9和IE10不支持pointer-events。此外，您还可以设置pointer-events: fill，该fill值仅是SVG，表示fill或visibility不影响指针事件处理的值。

一种IE9和IE10解决方法是设置CSS来fill: transparent，如果pointer-events不支持（可以使用Modernizr的检测浏览器的功能）。

$("#rect").mouseenter(function() {
  $(this).css("fill", "teal")
}).mouseout(function(){
  $(this).css("fill","transparent")
})

#rect {
  fill: transparent;
  stroke: blue;
  stroke-width: 1px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<svg width=300 height=300>
  <rect id="rect" x=0 y=0 width=100 height=100></rect>
</svg>