在 SVG 中选择坐标处的元素

Question

所以，我有一个从 Adobe Illustrator 导出的 SVG（插画文件不再可用）。我还有一个包含数据和坐标 (x1, y1,x2, y2) 的 csv。我已经 ctrl+f 在 SVG 中找到了这些值，其中 none 就在那里。我猜这是因为 adobe illustrator 移动了所有内容（尽管我可能是错的）。

我的问题是是否有办法使用 d3 或其他一些库在给定坐标处获取元素（或多个元素，我知道 SVG 是多层的）。我的目标是使用 CSV 数据生成工具提示。当用户将鼠标悬停在 svg 中给定坐标处的元素上时，它应该会从 csv 中获取一些数据。关于如何完成此操作还有其他建议吗？

Answer 1

当你说你想 "select an element by coordinates" 使用 D3 时，我觉得这听起来像是 XY problem。不仅因为它很复杂，还因为你可能不需要它。

如果您只想在鼠标位于给定坐标（周围）时显示一些信息，这是我的建议：使用您的 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
    });

在 SVG 中选择坐标处的元素

Selecting element at coordinates in SVG

javascript

csv

svg

adobe-illustrator

d3.js