How to iterate through SVG nodes and add event to it (JS)?

Question

I have a simple SVG file that I need to load and iterate through shapes nodes to add an onclick event. The problem is that it is not finding the shape nodes in my SVG file after it loads. What am I doing wrong?

This is my SVG:

And this is my code:

user_15015675 · Answer

Your code is missing some points:

you've already implemented to load the object data/src
But: you also need to parse the loaded content via svgholder.contentDocument to access child elements
your svg markup contains invalid tags/elemnts: is not a standard compliant element – unless you are creating/registering something like a web component
the click/hover area will be defined by a geometry element like or primitives like , etc. The closest thing to your nested element would be a group element.

Try this code:

HTML

object data/svg

JS
let svgholder = document.getElementById("svgholder");

//load external object content
svgholder.onload = function () {
    //get object's svg DOM
    let doc = svgholder.contentDocument; 
    let shapes = doc.querySelectorAll(".shape");

    //set click event listeners for each element
    for (let i = 0; i < shapes.length; i++) {
        shapes[i].addEventListener("click", function(e){
          let current = e.currentTarget;
          let parentGroup = current.parentNode.closest('g');
          //if there is a parent group - get the id - otherwise return empty string
          let parentGroupID = parentGroup ? parentGroup.id : '';
          let grandParentGroup = parentGroup.parentNode.closest('g');
          let grandParentGroupID = grandParentGroup ? grandParentGroup.id : '';
          console.log(`clicked element: "#${current.id}" parent group: "#${parentGroupID}" grandparent group: "#${grandParentGroupID}"`)
        }
        );
    }
}

Final thoughts:

Actually I strongly recommend to to switch to a more modern approach than

How to iterate through SVG nodes and add event to it (JS)?

1 Answers

Final thoughts: