getScreenCTM과 inverse

이번에는 SVG에서 포인터 좌표를 되돌리는 방법입니다.

HTML 쪽에서는 getBoundingClientRect()와 DOMMatrix를 봤습니다. SVG에는 getScreenCTM()이라는 함수가 있습니다. CTM은 current transformation matrix입니다. 이름은 딱딱하지만 역할은 익숙합니다.

SVG 내부 좌표가 screen으로 가는 matrix를 알려줍니다.

getScreenCTM은 화면까지의 변환이다

screenPoint = CTM * svgPoint
svgPoint = inverse(CTM) * screenPoint
CTM includes viewBox transform and ancestor transforms

getScreenCTM은 SVG local 좌표에서 screen 좌표까지 가는 전체 변환입니다. 포인터 입력은 inverse를 곱해 local로 되돌립니다.

포인터는 clientX/clientY로 들어옵니다. 이 screen point를 SVG 내부 좌표로 바꾸려면 CTM의 inverse를 곱합니다.

const point = new DOMPoint(event.clientX, event.clientY);
const svgPoint = point.matrixTransform(element.getScreenCTM().inverse());

이 패턴은 path point picking, connector endpoint dragging, vector handle editing에서 자주 씁니다.

SVG의 transform과 CSS의 transform이 같이 쓰이면 좌표 변환 체인을 더 꼼꼼히 봐야 합니다. 브라우저가 어떤 transform까지 CTM에 포함하는지 테스트로 확인하는 편이 안전합니다.

레이아웃이나 viewBox가 바뀐 뒤에는 CTM도 다시 읽어야 합니다. 예전 matrix를 들고 있으면 포인터가 살짝 다른 세계로 갑니다.

데모에서는 SVG를 scale/translate한 뒤 포인터 좌표가 path 좌표로 정확히 변환되는지 확인합니다.

오늘의 핵심은 HTML이든 SVG든 결국 같은 이야기라는 점입니다. 화면 좌표로 들어온 포인터를 inverse matrix로 내부 좌표에 데려옵니다.