중첩 된 SVG 요소로 d3.on ("mouseover") 이벤트가 작동하지 않습니다.

Question

중첩 된 요소 집합 (SVG)이 있습니다. 루트 요소는 그래프이고 자식 요소는 그래프의 요소 (선, 축 등)입니다. 간단한 예 :

<g transform="translate(80,10)" id="mainGraph"> 
    <g class="Line"> 
     <path d="....."></path> 
    </g> 
</g> 

내 문제는 내가 mainGraph 요소 (예를 들어 D3.on ("마우스 오버")와 함께) 마우스 오버/MouseMove 이벤트 이벤트를 결합하면 내가 하나를 위로 마우스를 이동하는 경우, 그것은 단지 트리거이다 자식 요소들.

내가 읽은 것 중 하나는 이후 요소의 우선 순위가 있으므로 모든 자식 요소에 .style ("포인터 이벤트", "없음")을 추가했지만 작동하지 않는다는 것입니다.

something.append('svg:rect') 
    .attr('width', width) // the whole width of g/svg 
    .attr('height', height) // the whole heigh of g/svg 
    .attr('fill', 'none') 
    .attr('pointer-events', 'all') 
    .on('mouseover', function() { 
     // do something 
    }  
    }); 

내가 (당신의 예에서 mainGraph)를 <g> 요소를 믿는다

Answer 1

한 가지 방법은 나중에 추가 요소에 의해 체포되지 않은 마우스 이벤트를 잡으려고 첫 번째 요소로 표면 전체를 채우는 사각형을 추가하는 것입니다 마우스 이벤트를 수신 할 수있는 실제 모양이 아니라 컨테이너 일뿐입니다.

svg 요소 자체에 마우스 이벤트 수신기를 추가 할 수는 있지만 <g>이 작동하지 않을 것이라고 생각합니다.

Answer 2

요소는 rect과 별개로 이벤트가 트리거되도록하려면 pointer-events: all;과 같은 CSS 속성을 설정해야합니다.

Answer 3

나는 또한 동일한 문제에 직면 해있다.
이 솔루션은 사용자가 명시 적으로 크기를 설정하면 작동한다`g`를 사용하여 부모 요소

pointer-events: stroke; 

또는

pointer-events: visibleStroke;