What is the replacement for the deprecated SVGPoint javascript API?

Question

I need to convert from a javascript click event to the coordinate space of an SVG element. I am currently using techniques like https://stackoverflow.com/a/48354404/995935 , but https://developer.mozilla.org/en-US/docs/Web/API/SVGPoint says that SVGpoint is "no longer recommended" and "may cease to work at any time".

Unfortunately, it does not mention what API should be used to replace it.

How should I rewrite the code sample

function screenToSVG(screenX, screenY) {
   var p = svg.createSVGPoint()
    p.x = screenX
    p.y = screenY
    return p.matrixTransform(svg.getScreenCTM().inverse());
}

to avoid deprecated APIs?

user_322084 · Answer

Using DOMPoint(). I was searching for this myself and it looks like it can replace SVGPoint 1:1. Here is an example:

const svg = document.getElementById('svg01');
const print = document.getElementById('print');

const toSVGPoint = (svg, x, y) => {
  let p = new DOMPoint(x, y);
  return p.matrixTransform(svg.getScreenCTM().inverse());
};

svg.addEventListener('click', e => {
  let p = toSVGPoint(e.target, e.clientX, e.clientY);
  print.textContent = `x: ${p.x} - y: ${p.y}`;
});

svg {
  border: thin solid black;
  cursor: pointer;
}

Position

What is the replacement for the deprecated SVGPoint javascript API?

1 Answers