Firefox 3.6命中测试重叠SVG形状
我画了2个SVG路径,就像谷歌地图在方向上做的那样 我遇到的问题是,第一条路径中被第二条路径的边界框重叠的部分不会触发mouseover、mouseout或click事件。即使事件处理程序位于path dom元素上,但当鼠标位于路径边界框内的任何位置时,事件似乎会触发 有没有办法避免这种情况?在Chrome、Safari和Opera上,我没有这个问题。它是Firefox中唯一的SVG 我创建了一个测试示例。当你在一个圆圈上移动鼠标时,它应该提醒你它的颜色。您将看到,如果您从最右侧接近绿色圆圈,它会工作,因为它位于红色圆圈容器的300px宽度之外。然而,如果你从绿色圆圈的顶部或底部接近,你将一无所获。现在在Chrome/Safari/Opera中尝试同样的方法,您将看到它如预期的那样工作Firefox 3.6命中测试重叠SVG形状,firefox,svg,hittest,Firefox,Svg,Hittest,我画了2个SVG路径,就像谷歌地图在方向上做的那样 我遇到的问题是,第一条路径中被第二条路径的边界框重叠的部分不会触发mouseover、mouseout或click事件。即使事件处理程序位于path dom元素上,但当鼠标位于路径边界框内的任何位置时,事件似乎会触发 有没有办法避免这种情况?在Chrome、Safari和Opera上,我没有这个问题。它是Firefox中唯一的SVG 我创建了一个测试示例。当你在一个圆圈上移动鼠标时,它应该提醒你它的颜色。您将看到,如果您从最右侧接近绿色圆圈,它
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>SVG embedded inline in XHTML</title>
<script type="text/javascript">
window.onload = function () {
var red = document.getElementById('red-circle');
var green = document.getElementById('green-circle');
red.onmouseover = function (e) {
alert('red mouse over');
};
green.onmouseover = function (e) {
alert('green mouse over');
};
};
</script>
</head>
<body>
<svg:svg style="position: absolute; top: 0px; left: 110px; z-index: 0;" version="1.1" baseProfile="full" width="300px" height="200px">
<svg:circle id="green-circle" cx="150px" cy="100px" r="50px" fill="green" />
</svg:svg>
<svg:svg style="position: absolute; top: 0px; left: 0px; z-index: 0;" version="1.1" baseProfile="full" width="300px" height="200px">
<svg:circle id="red-circle" cx="150px" cy="100px" r="50px" fill="#ff0000" />
</svg:svg>
</body>
</html>
XHTML中内嵌的SVG
window.onload=函数(){
var red=document.getElementById('red-circle');
var green=document.getElementById('green-circle');
red.onmouseover=函数(e){
警报(“红色鼠标悬停”);
};
green.onmouseover=函数(e){
警报(“绿色鼠标悬停”);
};
};
我可以用Firefox4重现这一点。您可以在DOM层次结构的更高级别上安装事件处理程序,并使用事件的target
字段来区分图形元素。这仍然不起作用,因为firefox在形状周围使用了一个边界框。不是形状精确的周长。我最后要做的是在父元素上手动执行命中测试。i、 跟踪鼠标光标的x&y值,看看它是否与多边形相交。你一定是做错了什么,因为它确实是这样工作的。它的工作,我已经开始了一个类似的私人(实际上是公司)项目,也这样做。