查找SVG元素在视口中是否可见
假设我有一些SVG,如下所示<代码>#canvas将应用一些转换:查找SVG元素在视口中是否可见,svg,intersection,Svg,Intersection,假设我有一些SVG,如下所示#canvas将应用一些转换: <svg id="viewport" x="0" y="0" width="100%" height="100%"> <g id="canvas" transform="scale(0.17)"> <image class="imageTile" x="0" y="0" width="256" height="256"/> <image class="im
<svg id="viewport" x="0" y="0" width="100%" height="100%">
<g id="canvas" transform="scale(0.17)">
<image class="imageTile" x="0" y="0" width="256" height="256"/>
<image class="imageTile" x="256" y="0" width="256" height="256"/>
<image class="imageTile" x="0" y="256" width="256" height="256"/>
<image class="imageTile" x="256" y="256" width="256" height="256"/>
</g>
</svg>
我知道getScreenCTM()
会给我一个SVGMatrix对象,但我不知道如何使用它来计算交点。我也知道SVGElement.getIntersectionList()
方法,但它似乎存在一些浏览器兼容性问题。有更好的方法吗?在的帮助下,我找到了:
var tile; // this is your SVG tile node
var svgroot = tile.ownerSVGElement;
var scale = svgroot.currentScale;
var vbParts = svgroot.getAttribute("viewBox").split(" ");
var vbx = parseInt(vbParts[0]);
var vby = parseInt(vbParts[1]);
var vbxu = parseInt(vbParts[2]);
var vbyu = parseInt(vbParts[3]);
var tx = svgroot.currentTranslate.x;
var ty = svgroot.currentTranslate.y;
var svgWidth = parseInt(svgroot.getAttribute("width"));
var svgHeight = parseInt(svgroot.getAttribute("height"));
var svgzoomfactor = vbxu / svgWidth;
var vpRect = svgroot.createSVGRect();
vpRect.x = parseFloat(vbx + (-tx) * (svgzoomfactor) / scale);
vpRect.y = parseFloat(vby + (-ty) * (svgzoomfactor) / scale);
vpRect.width = parseFloat(svgWidth * svgzoomfactor / scale);
vpRect.height = parseFloat(svgHeight * svgzoomfactor / scale);
if (svgroot.checkIntersection(tile, vpRect)) {
// the tile intersects the viewport!
}
这也存在浏览器兼容性问题。Firefox中不支持checkIntersection()(可能是其他版本)。我认为元素的transform标记和bbox可以解决这个问题,但我还没有尝试过。
var tile; // this is your SVG tile node
var svgroot = tile.ownerSVGElement;
var scale = svgroot.currentScale;
var vbParts = svgroot.getAttribute("viewBox").split(" ");
var vbx = parseInt(vbParts[0]);
var vby = parseInt(vbParts[1]);
var vbxu = parseInt(vbParts[2]);
var vbyu = parseInt(vbParts[3]);
var tx = svgroot.currentTranslate.x;
var ty = svgroot.currentTranslate.y;
var svgWidth = parseInt(svgroot.getAttribute("width"));
var svgHeight = parseInt(svgroot.getAttribute("height"));
var svgzoomfactor = vbxu / svgWidth;
var vpRect = svgroot.createSVGRect();
vpRect.x = parseFloat(vbx + (-tx) * (svgzoomfactor) / scale);
vpRect.y = parseFloat(vby + (-ty) * (svgzoomfactor) / scale);
vpRect.width = parseFloat(svgWidth * svgzoomfactor / scale);
vpRect.height = parseFloat(svgHeight * svgzoomfactor / scale);
if (svgroot.checkIntersection(tile, vpRect)) {
// the tile intersects the viewport!
}