SVG要素がビューポートに表示されているかどうかを確認する

Question

SVGが次のようになっているとします。

<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をドラッグすると、私はダウンロードをオフに起動します：#canvasは、いくつかの変換が適用されます。

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()メソッドを認識していますが、ブラウザの互換性の問題があるようです。より良い方法がありますか？ Mr. B. Campin's SVG Open paperの助けを借りて

Answer 1

は、私はそれを考え出した：

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