How to align a SVG on top of a image.

[AlexanderProd]

Hi,

I have an image where I want to show information based on a click in the image.
My idea was to put an invisible SVG as a kind of map on top of the image so I can specify particular areas in the SVG.

I've forked the "SVG map with html annotations" example since this was a good starting point, the only problem i've encountered is that SVG is never aligned with the plane that has the image texture.

I've managed to set the Y scale of the SVG to perfectly match the image but the scale on X axis is always somewhat off.

The SVG file hast the same size and aspect ration as the image (3840x2160).

You checkout everything in this codesandbox.
The 4 white rectangles should be in the corners of the image as I've positioned them exactly there using Illustrator.

I'm sure I'm just missing something trivial but I cant seem to find the problem, I hope someone can check it out. :)

[AlexanderProd]

I've figured out this formula to set the scale of the X axis

0.956 * height * (3840 / 2160)) / 3840

but I'm wondering if theres a more elegant way than using my approximated constant of 0.956.

[AlexanderProd]

fixed it by setting the planeBufferGeometry args to multiple decimals precise and not just 1.7