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.

That Codepen is one of the best interactive CTM explanations around... ``getscreenCTM`` is what you need — Danny '365CSI' Engelman, Feb 28 '21 at 09:32
This answer shows the basics: https://stackoverflow.com/questions/22183727/how-do-you-convert-screen-coordinates-to-document-space-in-a-scaled-svg — Danny '365CSI' Engelman, Feb 28 '21 at 09:40

score 1 · Answer 1 · answered Feb 27 '21 at 21:47

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

answered Feb 27 '21 at 21:47

ccarstens

419
3
13

how would the formula look in action for one of the example? – The epic face 007 Mar 02 '21 at 02:49
What have you tried so far? Stack Overflow is not a coding service. People love to help you, but you need to help yourself first. – ccarstens Mar 02 '21 at 06:42

How do I convert DOM coordinate to SVG coordinate?

1 Answers1

Example 1

Example 2