SVG getIntersectionList返回null [英] SVG getIntersectionList returns null
问题描述
在SVG文件的上下文中，以下JavaScript:
In the context of a SVG file, the following JavaScript:
var svg = document.rootElement, hitRect, hits;
hitRect = svg.createSVGRect();
hitRect.height = 1;
hitRect.width = 1;
hitRect.y = 100;
hitRect.x = 100;
hits = svg.getIntersectionList(hitRect, null);
始终将null分配给hits，无论是否有任何交叉点(在没有交叉点的情况下，它都应该是一个空的NodeList).
always assigns null to hits, regardless if there were any intersections at all (in the case of no intersections, it should've been an empty NodeList).
有人偶然发现这个问题吗?是否有已知的解决方法可以在Android中对SVG进行命中测试?
Has anyone stumbled in to this problem? Is there a known workaround for hit-testing a SVG in Android?
经过以下测试:Android 4.0.3(仿真器)，4.0.3(GALAXY Note SC-05D)上的Android默认浏览器. (谷歌浏览器有效)
Tested on: Android default browser on Android 4.0.3 (emulator), 4.0.3 (GALAXY Note SC-05D). (Google Chrome works)
修改
我也尝试遍历所有元素(document.getElementsByTagName("*"))，用svg.checkIntersection测试每个元素，但无济于事. checkIntersection刚刚为每个元素返回了true.
I also tried looping through all elements (document.getElementsByTagName("*")), testing each one with svg.checkIntersection, to no avail. checkIntersection just returned true for every single element.
推荐答案
在测试iOS Safari< = 5.0时，我也遇到了问题，就像它不支持SVG 1.1一样，因此在将以下属性添加到svg元素后，没有效果:
I also encounter the problem when test of iOS Safari <= 5.0, same like it's not support SVG 1.1, so after adding following attribute to the svg element, it's no effect:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect id="r1" x="5" y="5" width="40" height="40"/>
<rect id="r2" x="105" y="105" width="40" height="40"/>
<rect id="r3" x="5" y="5" width="40" height="40"/>
<rect id="rr" x="5" y="5" width="400" height="400" fill="red"/>
<rect id="r4" x="5" y="5" width="40" height="40"/>
<rect id="r5" x="5" y="5" width="40" height="40"/>
</svg>
<script type="text/javascript">
var isTouch = ('ontouchstart' in window) || ('DocumentTouch' in window && document instanceof DocumentTouch);
var downE = isTouch? 'touchstart' :'mousedown';
var moveE = isTouch? 'touchmove' :'mousemove';
var upE = isTouch? 'touchend' :'mouseup';
window.addEventListener(downE, startTest )
function startTest (evt) {
setTimeout(function () {
var svg=document.querySelector('svg');
var r = svg.createSVGRect();
r.x = 20;
r.y = 20;
r.width = r.height = 44;
var getIntersectionList = svg.getIntersectionList(r, null );
var checkIntersection = svg.checkIntersection( document.querySelector('#r2'), r );
var elementFromPoint = document.elementFromPoint(20,20);
alert("getIntersectionList: "+getIntersectionList);
alert("checkIntersection: "+checkIntersection);
alert("elementFromPoint: "+elementFromPoint);
},1000);
}
</script>
</body>
</html>
以上测试代码应发出警报:
Above test code should alert:
getIntersectionList: [object NodeList]
checkIntersection: false
elementFromPoint: [object SVGRectElement]
但是在iOS Safari< = 5.0和某些android系统中，它会发出警报:
But in iOS Safari <=5.0 and some android it's alert:
getIntersectionList: null
checkIntersection: true
elementFromPoint: [object SVGRectElement]
因此，如果要获得更好的兼容性，请仅依靠以下方法:
So, if you want to get better compatibility, only rely on the method:
var el = document.elementFromPoint(x,y);
它在(x，y)点下是最顶层的元素，甚至支持IE 5.5
it's get topmost element under the point (x,y), even support IE 5.5
您可以在较小的矩形区域(中心，4个角)(或更多点)中测试5个点，以解决此问题.
You can test 5 points in a small rect area(center, 4 corner) (or more points), to workaround this.
这篇关于SVG getIntersectionList返回null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
