SVG pointer-events와 stroke hit testing

이번에는 SVG에서 무엇을 클릭 가능한 영역으로 볼지 정하는 이야기입니다.

선이 아주 얇은 path를 생각해봅시다. 화면에는 1px 선으로 보여도 사용자가 그 1px을 정확히 클릭하기는 어렵습니다. 그래서 편집기에서는 보이는 선과 잡히는 영역을 다르게 설계합니다.

SVG의 pointer-events가 여기서 도움이 됩니다.

fill, stroke, bounding-box

stroke hit은 path까지의 최단거리 <= strokeWidth / 2 문제다.
fill hit은 winding rule 또는 even-odd rule을 따른다.
bounding-box hit은 AABB 포함 검사다.

SVG path 편집에서는 보이는 stroke와 잡히는 hit stroke를 분리합니다. 얇게 보이되 넓게 잡히게 만드는 것이 핵심입니다.

pointer-events="stroke"로 두면 stroke 영역만 잡히게 할 수 있고, fill은 채워진 영역을 기준으로 합니다. bounding-box는 더 거칠지만 빠르고 관대한 판정입니다.

얇은 path 위에 투명한 더 두꺼운 helper path를 겹칠 수 있습니다.

visible path: strokeWidth 1
hit path: strokeWidth 12, transparent

사용자는 얇은 선을 보지만, 클릭은 넓은 영역에서 됩니다. 이건 속임수가 아니라 배려입니다. 1px을 정확히 찍으라고 요구하는 UI가 더 무례합니다.

핸들과 path segment가 겹치는 곳에서는 우선순위도 정해야 합니다. 보통은 작은 handle이 path보다 먼저 잡히는 편이 예측 가능합니다.

데모에서는 stroke 두께와 helper hit path를 바꿔 선택하기 쉬운 영역을 비교합니다.

오늘의 핵심은 hit area가 반드시 visual shape와 같을 필요는 없다는 점입니다. 편집기는 보이는 것과 잡히는 것을 의도적으로 다르게 설계할 수 있습니다.