'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 of what I have:

https://jsfiddle.net/hL1weg3o/1/

So basically the CSS is:

svg, svg * {
    pointer-events: none;
}
#map {
  display: block;
  text-indent: -9999px;
  width: 100% ;
  height: 600px;
}

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>

    <div id="mapContainer">
        <object id="map" data="https://chambresdhotes.org/2018/franceHigh.svg" type="image/svg+xml"></object>
    </div>


  </body>
</html>

..and then I'm trying to capture the clicks with:

document.getElementById("FR-A").addEventListener('click', function (event) { test() });

The paths in the SVG look something like:

<path id="FR-A" title="Alsace" class="land"
 d="M498.91,208.16L502.37,206.45L501.41,203.92L502.77,202.75L502.05,202.16L503.38,197.19L505.73,195.84L508.91,190.38L508.19,188.16L513.99,177.9L513.19,176.07L510.57,176.47L508.87,175.28L510.21,173.71L509.24,172.42L510.58,167.67L509.44,165.85L511.28,166.21L508.42,164.55L512.58,164.35L514.79,162.8L518.37,156.06L516.75,155.91L515.79,154.05L518.79,149.33L516.06,146.78L516.51,145.88L512.08,144.43L510.96,147.15L508.96,148.25L509.41,146.56L507.87,146.28L507.83,144.51L509.66,143.35L507.81,143.57L507.73,142.59L503.83,141.4L503.38,138.89L504.82,138.9L505.31,137.13L507.05,137.45L508.51,130.56L509.79,129.8L510.96,134.31L517.94,136.33L517.8,137.48L519.26,138.25L524.5,136.67L528.02,138.94L529.75,137.39L532.17,131.3L532.17,131.3L536.13,131.11L536.25,131.93L538.69,130.52L541.69,132.56L544.49,131.02L551.1,135.31L556.89,136.82L553.43,140.7L550.96,147.12L546.08,149.96L545.75,152.17L540.57,157.24L538.95,160.81L539.2,165.15L537.64,166.68L536.15,172.66L536.66,176.85L534.52,178.43L533.41,183.41L529.69,189.69L529.39,195.05L531.58,198.9L528.85,204.64L527.73,210.8L528.49,213.6L526.98,215.84L530.29,221.55L529.95,223.31L526.45,225.53L527.76,226.24L526.39,226.69L526.95,228.06L526.01,229.02L523.64,228.23L523.2,229.14L524.64,229.71L521.77,232.09L519.37,231.53L515.83,232.75L515.37,231.65L512.79,231.37L514.11,228.3L511.23,227.75L511.23,227.75L511.67,226.42L509.3,222.24L505.95,221.67L507.63,217.4L507.24,214.26L503.23,211.3L500.16,210.59z"/>

Am I misunderstanding how you capture a click on a div? Basically I need to grab the value of "title" from the path clicked on, and then my JS can work out where to send the user.

Thanks!

javascript svg

Solution 1:^[1]

@MSC's answer was what I needed. (Upvoted the OP's question and @MSC's answer.) Here's a vanilla JavaScript version in case anyone needs a quick cut and paste:

function fetchAndAssignSvg(url, element) {

    // Validate parameters
    if (typeof url !== "string" || url.length === 0) { return; }
    if (typeof element === "undefined") { return; }

    // See the following link to use 'XMLHttpRequest' instead of Fetch API
    // stackoverflow.com/questions/17901116/i-need-the-equivalent-of-load-to-js/17901198

    fetch(url)
        .then(response => {
            if (!response.ok) {
                console.log(response);
                return;
            }
            response.text().then(text => {
                element.innerHTML = text;
                element.addEventListener("pointerdown", pointerdownListener);
            });
        })
        .catch(error => {
            console.log(error);
        });
}

function pointerdownListener(e) {
    let target = e.target;
    if (target.tagName.toLowerCase() === "path") {
        console.log(target.id);
    }
}

// Sample call:
fetchAndAssignSvg("https://chambresdhotes.org/2018/franceHigh.svg", document.querySelector("#map-container"));

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dave B

'Trigger click on SVG image

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]