Обработчик щелчка на <svg> Элемент

Question

Кажется, что использование элемента <svg:svg> </svg:svg> ничего не отображает в Safari или Chrome, но с использованием <svg> </svg> работает нормально. Однако добавление onclick работает только с элементами <svg:svg>. Каков правильный способ сделать это?

This jsfiddle демонстрирует проблему (сравните Safari/Chrome с Firefox).

Answer 1

Хорошо, получается, что первый способ создания SVG создает onclick только на нарисованной части. Это означает, что вы действительно можете сделать что-то приятное (может быть, не полезно в вашем случае).

В this fiddle я создал два отдельных onclick s, которые запускаются, когда вы нажимаете специально рисунок (который я сделал больше, чтобы вы могли видеть), и тот, который срабатывает, когда вы нажимаете на окно SVG, помещая контейнер вокруг Это.

HTML:

<div id="svgContainer"> 
    <svg id="firstSVG" class="s" xmlns="http://www.w3.org/2000/svg"> 
     <circle cx="50" cy="50" r="25" fill="red"/> 
    </svg> 
</div> 

JS:

document.getElementById('firstSVG').addEventListener('click', function (event) { 
    document.getElementById("output").innerHTML = "Click works here too !"; 

}, false); 
document.getElementById('svgContainer').addEventListener('click', function (event) { 
    document.getElementById("output").innerHTML = "Well, a container seems better."; 

}, true); 

Поэтому в основном просто использовать контейнер вокруг SVG, или просто использовать нажмите на рисунок

Answer 2

Вы надеваете даже не нужно класть контейнер вокруг SVG.

Вам нужно просто определить position: relative самому SVG и решить проблему с нажатием кнопки.

Вот раздвоенный Fiddle показывая его: http://jsfiddle.net/jpsirois/xnw1tbL7/