查找 SVG 元素在视口中是否可见

发布于 2024-11-18 12:41:59 字数 954 浏览 5 评论 0原文

假设我有一些如下所示的 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() 方法，但它似乎存在一些浏览器兼容性问题。有更好的办法吗？

原文

Say I have some SVG that looks like the following. #canvas will have some transforms applied:

<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 will be draggable, so when I drag a .imageTile into view, I will fire off a download.

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

I know that getScreenCTM() will get me an SVGMatrix object, but I don't know how to use that to calculate the intersection. I'm also aware of the SVGElement.getIntersectionList() method, but it seems to have some browser compatibility issues. Is there a better way?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷雾森÷林ヴ 2024-11-25 12:41:59

在先生的帮助下B. Campin的SVG Open论文，我弄清楚了：

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

With the help of Mr. B. Campin's SVG Open paper, I figured it out:

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

回复收藏 0 原文