Trigger Click On Svg Image

I'm having a play with a SVG image to see if I can create a map for my website. I grabbed the image from a 3rd party site, and now I'm just trying to implement it. Here is a fiddle

Solution 1:

You'll need to load the SVG into the page's DOM if you want to attach your event listener to shapes within it, otherwise your JS won't be able to see them.

One way to do this is to cut and paste the SVG into your HTML. Another way is to load the SVG's DOM into a wrapper element - such as a DIV - through JS / jQuery:

<divid="mapContainer"></div><script>
$(function() {
  $('#mapContainer').load("https://chambresdhotes.org/2018/franceHigh.svg", function() {
    $("#FR-A").click(function(event) {
      test();
     });
  });
});
</script>

(Apologies for the jQuery; my JS is a little rusty.)

Note that I have this inside the DOM loaded block to make sure it runs only after the #mapContainer is loaded. You can see this in action on the Interspan website. Instead of clicking, hover over the logo in the top left corner. The principle is the same, it's just using the hover event instead of the click event.