在SVG中的坐标处选择元素

所以,我有一个从Adobe Illustrator导出的SVG(插画文件不再可用)。 我也有一个csv的数据和坐标(x1, y1,x2, y2) 。 我已经为SVG中的这些值提供了ctrl+f f'd,并且它们都不在其中。 我的猜测是这是因为Adobe Illustrator移动了所有东西(虽然我可能是错的)。

我的问题是,如果有一种方法,使用d3或其他库来获取给定坐标上的元素(或元素,我知道SVG是多层的)。 我的目标是使用CSV的数据来生成工具提示。 当用户将鼠标悬停在svg中给定的坐标上的元素上时,它应该从csv中下拉一些数据。 任何其他建议如何适应这个?


当你说你想用D3“按坐标选择一个元素”时,这听起来像是一个XY问题 。 不仅因为它很复杂,而且因为你可能不需要它。

如果您只想在给定坐标处显示某些信息(这是我的建议):使用您的CSV坐标数据创建一堆透明矩形,并将mouseover附加到这些矩形中:

var svg = d3.select("svg");
var rects = svg.selectAll(".rects")
    .data(data)
    .enter()
    .append("rect")
    .attr("opacity", 0)
    .attr("width", d=>d.x2 - d.x1)
    .attr("height", d=>d.y2 - d.y1)
    .attr("x", d=>d.x1)
    .attr("y", d=>d.y1)
    .on("mouseover", d=>{
        //show your tooltip
    });
链接地址: http://www.djcxy.com/p/95843.html

上一篇: Selecting element at coordinates in SVG

下一篇: what types of SVG files fabricJS support?