[Javascript] SVG 내 요소 좌표 구하기

현재 개발 중인 웹 페이지에서 요소의 좌표를 구해야 하는 일이 생겼다.

 

현재 구성은 아래 사진과 같이 전체가 svg가 아니라 일부분만 svg다.

(왼쪽의 지도 부분)

 

svg는 지도와 그 위에 좌표에 따라 마커를 표시하고 있다.

좌표가 그대로면 좋겠지만.. 지도와 마커는 transform을 이용해서 위치가 변해있는 상태다.

 

현재 상태에서 뷰박스의 0,0은 왼쪽 위, 지도의 0,0은 왼쪽 아래인 상황..

마커의 좌표를 알고있지만, 그 좌표를 뷰박스에 적용할 때는 다른 위치가 나오는 것이다.

 

특정 좌표에 transform을 적용한 후의 좌표를 알고싶었다.

이게 머리로는 이해하고 있는데 말로 설명하기가 잘..;; 암튼 마커의 현재 좌표를 알고 싶은 것..

내가 알고 있는 좌표에 transform을 적용하면 나오는 좌표를 알고싶다..라는 것..

 

열심히 삽질하다가 아래 글을 발견함 ..

https://www.sitepoint.com/how-to-translate-from-dom-to-svg-coordinates-and-back-again/

How to Translate from DOM to SVG Coordinates and Back Again — SitePoint

 

화면의 DOM 좌표를 svg의 viewbox에 대조해서 해당 위치의 좌표로 변환해주는 내용 ..!!

 

var svg = document.getElementById("svg");
var current_cord = document.getElementById(target_name).getBoundingClientRect();
var pt = svg.createSVGPoint();
pt.x = current_cord.x
pt.y = current_cord.y
const svgP = pt.matrixTransform( svg.getScreenCTM().inverse() );

 

var svg = document.getElementById("svg");

var current_cord = document.getElementById(target_name).getBoundingClientRect();

좌표를 구하고 싶은 타겟의 DOM 좌표를 구함

var pt = svg.createSVGPoint();
pt.x = current_cord.x
pt.y = current_cord.y

const svgP = pt.matrixTransform( svg.getScreenCTM().inverse() );

화면에서 svg가 차지하는 비율에 따라 트랜스폼을 연산해줌