0

I have an SVG rendered on a page. I am trying to find all the elements present at a specific coordinate, like (150, 300).

The coordinates are generated by the user clicking on the SVG. I achieved this by adding a callback to each element in the SVG which maps the cursor location to the SVG coordinate with the following code:

const pt = svg.createSVGPoint()
pt.x = event.clientX
pt.y = event.clientY

// The cursor point, translated into svg coordinates
const {x, y} = pt.matrixTransform(svg_ref.current.getScreenCTM().inverse())

Given a coordinate how can I find the corresponding element?

Shmuli
  • 56
  • 6
  • Converting back and forth between SVG level coordinated and screen level coordinates can be done fairly easily with these two functions: ```const screen_point_to_svg_point = (svg_el: SVGSVGElement, x, y) => { const point = svg_el.createSVGPoint() point.x = x point.y = y return point.matrixTransform(svg_el.getScreenCTM().inverse()) } const svg_point_to_screen_point = (svg_el: SVGSVGElement, x, y) => { const point = svg_el.createSVGPoint() point.x = x point.y = y return point.matrixTransform(svg_el.getScreenCTM()); }``` – Shmuli Jul 02 '21 at 02:09

0 Answers0