如何将鼠标悬停在SVG矩形上？ [英] How to hover over an SVG rect?

问题描述

在这部分SVG（在FF 8，Safari 5.1.2，Chrome 16，所有在Mac上尝试），当将鼠标移动到条上时，没有浏览器正确检测每个鼠标悬停/有时它的工作有时它不。但它在所有浏览器中是一致的，所以它可能是关于SVG代码。使用 onmouseover 和 onmouseout 给出相同的结果 - 无法正常工作。

In this piece of SVG (tried in FF 8, Safari 5.1.2, Chrome 16, all on Mac), when moving mouse over the bar, none of the browsers properly detect each on-mouse-over/out event, sometimes it works sometimes it doesnt. But it's consistent across all the browsers so it's probably something about the SVG code. Using onmouseover and onmouseout gives the same result - doesn't work properly.

对于SVG rect 角度，什么是执行悬停的正确方法？

What would be the correct way of implementing on hover for SVG rectangles?

<?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>

推荐答案

填充为none，只需添加：

What's happening is that the mouse events are not detected because the fill is 'none', just add:

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

然后就可以了。

这篇关于如何将鼠标悬停在SVG矩形上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！