SVG getIntersectionList returns null

SVG getIntersectionList returns null

本文关键字：null returns getIntersectionList SVG      更新时间：2023-09-26

在SVG文件的上下文中，以下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(。

有人偶然发现这个问题吗？在安卓系统中对SVG进行点击测试，是否有已知的解决方法？

测试平台：Android 4.0.3(模拟器(、4.0.3(GALAXY Note SC-05D(上的Android默认浏览器。(谷歌Chrome工作(

编辑

我还尝试循环遍历所有元素(document.getElementsByTagName("*")(，并用svg.checkIntersection测试每个元素，但没有成功。checkIntersection刚刚为每个元素返回了true。

我在测试iOS Safari时也遇到了问题<=5.0，就像它不支持SVG 1.1一样，所以在SVG元素中添加以下属性后，它没有效果：

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

以上测试代码应提醒：

getIntersectionList: [object NodeList]
checkIntersection: false
elementFromPoint: [object SVGRectElement]

但在iOS Safari<5.0和一些安卓系统它的警报：

getIntersectionList: null
checkIntersection: true
elementFromPoint: [object SVGRectElement]

因此，如果你想获得更好的兼容性，只需依靠以下方法：

var el = document.elementFromPoint(x,y);

它得到了点(x，y(下的最高元素，甚至支持IE 5.5

你可以在一个小矩形区域测试5个点(中心，4个角((或更多点(，以解决这个问题。

相关文章：