document.elementFromPoint를 사용하여 가까운 경로를 얻으십시오

Question

내 웹 사이트의 경우 사용자가 다양한 svg 요소를 클릭 할 수 있기를 바랍니다.

사용자가 묶인 모양을 클릭 할 수 있도록 빠른 기능을 코딩했습니다. 기본적으로 document.elementFromPoint(x, y)을 실행합니다. 클릭 할 수있는 영역이 있으므로 둘러싸인 모양에 효과적입니다. 그러나 열린 경로는 크기가 1-2 픽셀 밖에 없으므로 클릭하기가 쉽지 않습니다.

사용자가 '닫기'를 클릭하여 경로를 선택할 수 있도록 허용하고 싶습니다. 예를 들어 경로에서 클릭 거리가 10 픽셀 이하이면 경로가 선택됩니다. 나는 이것을 위해 수학적 알고리즘을 쓸 수있다. (Ray-Casting을 사용하여 예를 들어 10 픽셀 만 사용하거나, 점을 10px 반경 원으로 바꾸고 경로와 교차점을 확인한다.) 그러나 내 직감은 더 쉬운 방법이 있어야한다고 말한다. 아마도 CSS를 통해.

이 경로의 획이 선택을위한 두께가 10 픽셀이지만 눈에 띄게 1 픽셀 두껍습니다 (경계 상자가 아닌 경로에 '패딩'이있는 경우) . 나는 또한 pointer-events을 보았지만 경계 상자 (다른 모양을 선택하는 것을 피하기 위해 사용하지 않을 것임)를 제외하고는 아무 유용한 설정도 보지 못했습니다. 자바 스크립트 나 CSS에서 활용할 수있는 것이 있나요? (큐빅 베 지어 등에서는 추악해질 수 있기 때문에) 경로를 직접 계산하지 않고도이 작업을 수행 할 수 있습니까?

또한 HTML5 앱이라는 것을 언급해야합니다. 따라서 이전 버전과의 호환성은 신경 쓰지 않아도됩니다.

Answer 1

경로에 획이없는 경우 보이지 않는 획 (stroke-opacity = "0")을 만들고 pointer-events = "all"을 사용하여 모양에 확장 히트 영역을 부여 할 수 있습니다.

경로에 선이있는 경우 동일한 좌표이지만 스트로크 너비가 더 큰 가시 경로 상단에 두 번째 보이지 않는 경로를 만들어야합니다. 그런 다음 pointer-events = "all"을 사용하여이 보이지 않는 경로를 적 대상으로 만들고 적중 될 경우 보이는 모양이 맞았는 것처럼 이벤트 처리기에서 반응합니다.

Answer 2

로버트 롱슨 (Robert Longson)이이를 어떻게 수행 할 수 있는지 설명하지만 더 자세한 내용을 추가하려고합니다.

먼저 원하지 않는 경우 새 지오메트리를 복제하거나 만들 필요가 없습니다. < use> 요소를 사용할 수도 있습니다. 다른 css를 사용하면 보이지 않는 다른 요소가있을 때에도 모양을 다른 모양으로 지정할 수 있습니다.

<style> 
    g { fill: #ddd; stroke: black; pointer-events: none; } 
    use { pointer-events: all; stroke-width: 40; fill: none; stroke-opacity: 0; } 
    use:hover + * { fill: cornflowerblue; } 
<g> 
    <use xlink:href="#c"/> 
    <circle id="c" cx="50" cy="60" r="20"/> 
</g> 

live example을 참조하십시오.