Получение анкерного элемента в 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> 

Примечание: Функция сброса() представляет собой пользовательскую функцию, которая выводит содержимое объектов и массивов.

Моя первая версия этого кода просто выводит event.target.tagName, который всегда был «полигоном», хотя объект, к которому я привязываю клик, является якорем. Поэтому я изменил его, чтобы получить родительский многоугольник, но возвращает svg. Это похоже на якорь, которого нет.

Почему я не могу показаться, что событие для этой функции не содержит ссылки на якорь? Как я могу заставить это вести себя так, как если бы якорь находился внутри div?

Я пробовал jQuery SVG-плагин, но ничего не сделал.

TL; DR/Уточнение Проблема заключается не в том, что якорь не работает, щелкнув по нему, вы перейдете на страницу, определенную в xlink: href. Но любой код jQuery, связанный с щелчком событий, которые запускаются при нажатии этих якорей в svg, либо проходит через событие, либо не определено, либо не содержит ожидаемых данных объекта привязки.

Как я могу получить соответствующий объект события для этих якорей?

Edit: Наконец получил jsfiddle к нагрузке: http://jsfiddle.net/fja4Lt0L/

Объяснение текущего поведения в различных браузерах:

• FireFox: проблемы, как описано
• Chrome/Safari: ничего не делает вообще
• IE: следует за ссылкой независимо от сценария, прикрепленного к событию клика

Ни одно из них не является ожидаемым сценарием или предназначено кодер.

Answer 1

В SVG только графические элементы (линии, прямоугольники и т. Д.) Могут быть объектом событий. Если вы укажете его на контейнере, например. a <g> или <a> элемент, тогда все их дети становятся мишенями.

Просто позвоните .parentElement (если вы используете необработанную DOM) или .parent() (если вы используете jQuery) несколько раз, независимо от цели, пока не получите элемент привязки.

Here's an example или jquery and .parent