Click handler in the <svg> element

Question

It seems that using the <svg:svg> </svg:svg> element doesn't display anything in Safari or Chrome, but using <svg> </svg> works fine. However, adding onclick only works for <svg:svg> elements. How to do it right?

This jsfiddle demonstrates the problem (compare Safari / Chrome with Firefox).

Answer 1

Well, it turns out that the first way to create SVG creates onclick only on the elongated part. This means that you can really do something nice (maybe not useful in your case).

In this script , I created two separate onclick s that start when you click on a particular drawing (which I did more so you can see) and one that fires when you click on the SVG window, placing a container around it.

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); 

So just use the container around the SVG or just click on the picture

Answer 2

You do not even need to put the container around the SVG.

You just need to determine position: relative for the SVG itself and solve the button click problem.

Here it shows a forked fiddle: http://jsfiddle.net/jpsirois/xnw1tbL7/