查找SVG元素在視口中是否可見

Question

假設我有一些如下所示的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="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> 

#canvas將可拖動，所以當我拖.imageTile眼簾，我會把火關下載。

var tiles = Y.all(".imageTile"); 
for (var i = 0; i < tiles.size(); i++) { 
    if (the tile is visible - ??) { 
     // set its xlink:href attribute 
    } 
} 

我知道getScreenCTM()會得到我一個SVGMatrix對象，但我不知道怎麼用它來計算交點。我也知道SVGElement.getIntersectionList()方法，但它似乎有一些瀏覽器兼容性問題。有沒有更好的辦法？

Answer 1

隨着Mr. B. Campin's SVG Open paper的幫助下，我想通了：

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