누적 된 SVG 요소에서 mouseover 이벤트를 트리거하는 방법

CSS 태그의 pointer-events : none은 SVG 요소를 마우스 이벤트의 대상으로 만들지 않지만 하나의 스택 요소 만 이벤트의 대상이 될 수 있습니다. 마우스 이벤트가 커서 아래에있는 모든 요소를 대상으로하는 간단한 방법이있어 테두리가있는 상자에서 이벤트가 발생하면 누적 된 요소 집합의 이벤트가 모두 트리거됩니다.누적 된 SVG 요소에서 mouseover 이벤트를 트리거하는 방법

출처

2015-02-02 sakurashinken

나는 이것을 확실하게 말할 수는 없지만, 이것을 할 수있는 쉬운 방법이 없다고 생각합니다. – cmonkey

나는 바운드 이벤트가 프로그래밍 방식으로 일종의 "명령 체인"패턴으로 덮여있는 요소에 대한 이벤트를 트리거하는 것을 보았습니다. 그러나 그 정말 어려운 문제입니다. – sakurashinken

는 SVGSVGElement의 방법 (<svg>) 주어진 사각형과 교차 모든 요소를 반환합니다 getIntersectionList()라고 있습니다.

예를 들어 클릭하면 모든 SVG 모양에 임의의 색상을 부여하는 코드 스 니펫이 있습니다. 불행하게도

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

 
mysvg.addEventListener('click', function(evt) { 
 

 
    var hitRect = mysvg.createSVGRect(); 
 
    hitRect.x = evt.clientX; 
 
    hitRect.y = evt.clientY; 
 
    // (leave width & height as 0) 
 
    
 
    var elems = mysvg.getIntersectionList(hitRect, null); 
 
    for (i=0; i<elems.length; i++) { 
 
    // Give each element under the mouse a random fill colour 
 
    elems.item(i).setAttribute('fill', "rgb("+rnd()+","+rnd()+","+rnd()+")"); 
 
    } 
 
    
 
}); 
 

 

 
function rnd() { 
 
    return Math.floor(Math.random() * 255.99); 
 
}

<svg id="mysvg"> 
 
    
 
    <rect width="150" height="100" fill="#393"/> 
 
    <rect x="120" y="20" width="140" height="130" fill="orange"/> 
 
    <rect x="220" y="0" width="80" height="130" fill="red"/> 
 
    
 
</svg>

이는 현재 크롬에서 작동 (또한 어쩌면 사파리?). FF는 이것을 부분적으로 지원했지만, 현재 제거 된 것으로 보인다.

출처

2015-02-03 11:34:22

Firefox에서는 결코 구현되지 않았습니다. –

아 맞습니다. 버그를 제대로 읽지 못했습니다. 그것은 단지 제안 된 패치였습니다. https://bugzilla.mozilla.org/show_bug.cgi?id=501421 –

평소처럼 크롬이 게임보다 앞서 있습니다. – sakurashinken

누적 된 SVG 요소에서 mouseover 이벤트를 트리거하는 방법

답변

관련 문제