HTML5 SVG 和鼠标事件答案

【问题标题】：HTML5 SVG and mouse eventsHTML5 SVG 和鼠标事件
【发布时间】：2011-04-28 05:32:20
【问题描述】：

我用 Inkscape 制作了几个六边形并将它们放在一些 HTML5 中。我让 onmouseover 事件起作用，但 onmouseout 事件不起作用。我在 Google Chrome 11.0.696.57 beta 上运行它。有谁知道问题出在哪里？

【问题讨论】：

【解决方案1】：

我在示例中更改了一些内容以在 chrome 中修复它（示例在 safari、opera 或 IE9 中不起作用）。

首先，在 onmouseover 和 onmouseout 语句之后有一些分号。

onmouseover = "Hilight(evt)"
onmouseout = "Darken(evt)"

其次，事件正在触发，但 alpha 为 0.06，我将其更改为 0.6，现在更明显的是它正在触发：

function Darken(evt) {
     var GameSpace = evt.target;
     GameSpace.setAttribute("style", "fill-opacity: 0.6"); 
}

【讨论】：

我触发了事件，因为我可以使用 Chrome 开发工具观看它，但没有发生更改。不透明度保持不变。但是如果我点击鼠标右键，检查元素并关闭它，它会改变。此更改会立即在 Firefox 中显示。
我想我已经发现了问题所在。 Chrome 似乎存在“填充不透明度”问题。如果我将属性更改为“不透明度”，它会起作用。不过感谢您的帮助。我想知道是否有解决此问题的方法还是我只是处理它？
您还应该为内联 SVG 删除。通过使用“不透明度”而不是“填充不透明度”，您也会影响笔画。无需 JavaScript，您也可以使用 CSS（“:focus”选择器）实现您想要的效果。