gpt4 book ai didi

svg - 在给定坐标处获取 SVG-Object_s?

转载 作者:行者123 更新时间:2023-12-03 23:24:30 25 4
gpt4 key购买 nike

我想通过坐标从 SVG 文件中获取对象 ID。

例如在

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"
height="50" width="50">
<rect id="rectRED"
x="15" y="5" height="30" width="30"
style="fill:#ff0000;fill-opacity:0.5;stroke:#000000;stroke-width:1.5" />
<rect id="rectBLUE"
x="5" y="15" height="30" width="30"
style="fill:#0000ff;fill-opacity:0.5;stroke:#000000;stroke-width:1.5" />
</svg>


  • getObjectsAt(10,25)应该返回一个包含 rectBLUE 的列表
  • getObjectsAt(25,25)应该返回一个包含 rectRED 的列表和 rectBLUE
  • getObjectsAt(10,10)应该返回类似 NIL 的内容

  • 有没有办法做到这一点?

    最佳答案

    document.elementFromPoint 方法,但它只返回最顶层的元素。要获取一个点下的所有元素,您可以找到最上面的元素,隐藏它并再次查看该点,直到没有更多元素存在:

    var elementsAt = function( x, y ){
    var elements = [], current = document.elementFromPoint( x, y );
    // at least one element was found and it's inside a ViewportElement
    // otherwise it would traverse up to the <html> root of jsfiddle webiste.
    while( current && current.nearestViewportElement ){
    elements.push( current );
    // hide the element and look again
    current.style.display = "none";
    current = document.elementFromPoint( x, y );
    }
    // restore the display
    elements.forEach( function( elm ){
    elm.style.display = '';
    });
    return elements;
    }

    http://jsfiddle.net/duo02d38/

    关于svg - 在给定坐标处获取 SVG-Object_s?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30755696/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com