Нахождение элемента SVG видимым в области просмотра - PullRequest
Новая
       12

Нахождение элемента SVG видимым в области просмотра

1 голос
/ 02 июля 2011

Скажем, у меня есть 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 в поле зрения, я запускаю загрузку.1009 * Я знаю, что getScreenCTM() получит мне объект SVGMatrix, но я не знаю, как использовать это для вычисления пересечения.Я также знаю о методе SVGElement.getIntersectionList(), но, похоже, есть некоторые проблемы с совместимостью браузера.Есть ли лучший способ?

1 Ответ

3 голосов
/ 07 июля 2011

С помощью г-н. SVG B. Campin 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!
}
...