SVG 내의 앵커 요소 받기

Question

미국 내 주를 선택하기 위해 내 사이트에 svg가 있습니다. 형식은 다음과 같습니다 링크를 클릭하면 같은 사이트의 다른 스크립트에 문제가 발생하는 이유를 알아 내려고 두통의 몇 시간 후

<svg...> 
    <a xlink:href="..."> 
    <polygon ...><title>{stateName}</title></polygon> 
    </a> 
</svg> 

, 나는 그 기능에 전달되지 않는 경우에 문제를 좁혀 때 목표물은 SVG의 닻이었다.

그래서 나는 그 다른 스크립트없이 별도의 페이지를 만든 다음 함수를 만들어 실험 :

<script type="text/javascript"> 
(function($){ 
    $(document).ready(function(){ 
     $('svg a').click(function(event){ 
      if(event.target.tagName == 'polygon'){ 
       var target = $(this).parent(); 
       alert('target: ' + dump(target)); 
      }else{ 
       alert('event: ' + dump(event.target)); 
      } 
     }); 
    }); 
})(jQuery); 
</script> 

참고 : 덤프() 함수는 객체와 배열의 내용을 출력하는 사용자 정의 기능입니다.

이 코드의 첫 번째 버전은 click을 바인딩 할 객체가 앵커 임에도 불구하고 항상 "polygon"인 event.target.tagName 만 출력합니다. 그래서 폴리곤의 부모를 얻기 위해 그것을 수정했지만 그것은 svg를 반환합니다. 앵커가 존재하지 않는 것 같습니다.

왜 그 함수의 이벤트에 앵커에 대한 참조가 포함되어 있지 않은 것일까 요? 앵커가 대신 div 안에있을 경우 어떻게 동작할까요?

jQuery SVG 플러그인을 사용해 보았지만 아무 것도하지 않았습니다.

TL DR/설명 문제는 앵커가 작동하지 않는다는 것입니다. 클릭하면 xlink : href에 정의 된 페이지로 이동합니다. 그러나 svg 내에서 이러한 앵커를 클릭 할 때 트리거되는 클릭 이벤트에 바인딩 된 모든 jQuery 코드는 이벤트가 정의되지 않은 것으로 또는 예상되는 앵커 개체 데이터가 포함되지 않은 상태로 전달됩니다.

어떻게 이러한 앵커에 적절한 이벤트 객체를 얻을 수 있습니까?

편집 :

• 파이어 폭스 : 다른 브라우저에서 현재 동작의 http://jsfiddle.net/fja4Lt0L/

  설명 : 마지막으로 부하에 jsfiddle 가지고 문제를 설명

• 크롬/사파리로 모든
• 에서 아무것도하지 않는다 IE : 클릭 이벤트에 첨부 된 스크립트에 관계없이 링크를 따른다.

스크립트의 예상 동작이나 코더가 의도 한 동작은 없습니다.

Answer 1

SVG에서만 그래픽 요소 (선, 사각형 등 및 텍스트)가 이벤트 대상이 될 수 있습니다. 예 : 컨테이너에 지정하는 경우 <g> 또는 <a> 요소이면 모든 자식이 대상이됩니다.

원시 DOM을 사용하는 경우 .parentElement 또는 앵커 요소가 나타날 때까지 .parent() (jQuery를 사용하는 경우)을 반복적으로 호출하십시오.

Here's an example 또는 이것에 대한 JSFiddle을 jquery and .parent