如何将鼠标悬停在 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屋！