How do I convert DOM coordinate to SVG coordinate?

Question

I am trying to convert dom coordiante I get from the ontouch event( clientX and clientY more specifically) however I don't understand how I can do that.

I looked up at this example I found: https://codepen.io/ehsanjso/pen/xNZgPE?editors=1010 and I didn't understood any of it.

Answer 1

If the DOM and the SVG have the same dimensions, the coordinates in pixels and percent are the same. If one is bigger/smaller than the other the coordinates are the same in percent and different in pixels. Example for calculating the X dimension:

Example 1

• DOM has a width of 200
• SVG Element has a width of 200
• Point in DOM at x: 50 => Point in SVG at x: 50 (25%)

Example 2

• DOM has a width of 200
• SVG Element has a width of 100
• Point in DOM at x: 50 => Point in SVG at x: 25 (25%)

Formula: target_width * (point / width)

I hope this helps to understand the basics, explaining the entire example you provided is a bit out of scope