How can I loop through SVG elements and attach an event listener to each one in JavaScript?

Question

How can I loop through SVG elements and attach an event listener to each one in JavaScript?

I am struggling with loading a simple SVG file and iterating through the shape nodes to add an onclick event. Unfortunately, after the SVG file is loaded, it cannot find the shape nodes. What could be the issue here?

Here is the SVG code snippet:

<?xml version="1.0" encoding="windows-1252"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="336.652px" height="379.156px" viewBox="0 0 336.652 379.156" enable-background="new 0 0 336.652 379.156"
 xml:space="preserve">

<shapes id="shapes">
<shape id="shape1">
    <path fill="#999999" d="M190.96,240.98c0,0.011-0.01,0.011-0.01,0.011c-3.16,2.14-8.869,3.069-12.561,2.069l-11.48-1.681
        c-0.03-0.01-0.09-0.021-0.12-0.03c-0.03-0.01-0.05-0.029-0.07-0.05c-0.02,0-0.03-0.01-0.04-0.03c-0.14-0.119-0.2-0.33-0.12-0.51
        l2.88-6.68l3.32-8.53l0.069-0.149l-0.061,0.149c4.68,2.11,13.771,6.261,18.9,8.63l-0.33,6.2
        C191.341,240.6,191.181,240.87,190.96,240.98z"/>

</shape>
<shape id="shape2">
    <path fill="#CCCCCC" d="M305.425,65.506c0.171,0.181,0.271,0.53,0.23,0.78c-0.302,3.109-1.83,8.561-3.201,11.37
        c11.01,2.86,30.551,2.75,41.541-0.239c0.34-0.091,0.778,0.069,1,0.351L305.425,65.506z"/>
</shape>
</shapes>
</svg>

Now, let's take a look at the implementation code:

<html>
<body>
<object data="test.svg" id="svgholder" type="image/svg+xml"></object>
<script>
    var svgholder = document.getElementById("svgholder");
    svgholder.onload = function () {
        console.log("svg loaded");
        var shapes = svgholder.getElementsByTagName("shape");
        console.log(shapes.length)

        for (var i = 0; i < shapes.length; i++) {
            shapes[i].addEventListener("click", showshape, this.id, false);
        }
    }

    function showshape(id) {
        console.log(id);
    }
</script>
</body>
</html>

javascript svg

Answer 1

Answer №1

You're missing some key points in your code:

You've successfully implemented loading the object data/src
However, you also need to parse the loaded content through svgholder.contentDocument to access child elements
Your SVG markup contains invalid tags/elements: <shape> is not a standard compliant element, unless you are creating/registering a web component
The click/hover area should be defined by a geometry element like <path> or primitives such as <circle>, <rect>, etc. The closest alternative to your nested <shape> element would be a group <g> element.

Try using this code:

HTML

<object data="test.svg" id="svgholder" type="image/svg+xml"></object>

Object Data/SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 336.652 379.156">
    <g id="shapesGroup0">
        <g id="shapesGroup0-0">
            <path class="shape" id="shape1" fill="#999999" d="M190.96,240.98c0,0.011-0.01,0.011-0.01,0.011c-3.16,2.14-8.869,3.069-12.561,2.069l-11.48-1.681
                c-0.03-0.01-0.09-0.021-0.12-0.03c-0.03-0.01-0.05-0.029-0.07-0.05c-0.02,0-0.03-0.01-0.04-0.03c-0.14-0.119-0.2-0.33-0.12-0.51
                l2.88-6.68l3.32-8.53l0.069-0.149l-0.061,0.149c4.68,2.11,13.771,6.261,18.9,8.63l-0.33,6.2
                C191.341,240.6,191.181,240.87,190.96,240.98z"/>
        </g>
        <g id="shapesGroup1-0">
            <path class="shape" id="shape2" fill="#CCCCCC" d="M305.425,65.506c0.171,0.181,0.271,0.53,0.23,0.78c-0.302,3.109-1.83,8.561-3.201,11.37 c11.01,2.86,30.551,2.75,41.541-0.239c0.34-0.091,0.778,0.069,1,0.351L305.425,65.506z"/>
        </g>
    </g>
</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:

I highly recommend switching to a more modern approach than <object>, such as inlined SVG (which can actually improve site performance), smart use of externally referenced <use> elements, or native web components. Other users can provide more insight on this topic.

Answer 2

You're missing some key points in your code:

You've successfully implemented loading the object data/src
However, you also need to parse the loaded content through svgholder.contentDocument to access child elements
Your SVG markup contains invalid tags/elements: <shape> is not a standard compliant element, unless you are creating/registering a web component
The click/hover area should be defined by a geometry element like <path> or primitives such as <circle>, <rect>, etc. The closest alternative to your nested <shape> element would be a group <g> element.

Try using this code:

HTML

<object data="test.svg" id="svgholder" type="image/svg+xml"></object>

Object Data/SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 336.652 379.156">
    <g id="shapesGroup0">
        <g id="shapesGroup0-0">
            <path class="shape" id="shape1" fill="#999999" d="M190.96,240.98c0,0.011-0.01,0.011-0.01,0.011c-3.16,2.14-8.869,3.069-12.561,2.069l-11.48-1.681
                c-0.03-0.01-0.09-0.021-0.12-0.03c-0.03-0.01-0.05-0.029-0.07-0.05c-0.02,0-0.03-0.01-0.04-0.03c-0.14-0.119-0.2-0.33-0.12-0.51
                l2.88-6.68l3.32-8.53l0.069-0.149l-0.061,0.149c4.68,2.11,13.771,6.261,18.9,8.63l-0.33,6.2
                C191.341,240.6,191.181,240.87,190.96,240.98z"/>
        </g>
        <g id="shapesGroup1-0">
            <path class="shape" id="shape2" fill="#CCCCCC" d="M305.425,65.506c0.171,0.181,0.271,0.53,0.23,0.78c-0.302,3.109-1.83,8.561-3.201,11.37 c11.01,2.86,30.551,2.75,41.541-0.239c0.34-0.091,0.778,0.069,1,0.351L305.425,65.506z"/>
        </g>
    </g>
</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:

I highly recommend switching to a more modern approach than <object>, such as inlined SVG (which can actually improve site performance), smart use of externally referenced <use> elements, or native web components. Other users can provide more insight on this topic.

How can I loop through SVG elements and attach an event listener to each one in JavaScript?

Answer №1

Final thoughts:

Similar questions

I'm looking to extract various data from a SQLite table using the URL with ExpressJS. What's the best way to achieve

What causes a never-ending loading cycle on a website when a 404 error occurs?

The HTML div captured with html2canvas is incomplete

Steps for adding a React Class Component into a Modal that is not within the React Tree

Ways to identify and differentiate user clicks on various buttons

Troubleshooting issue with Bootstrap collapse functionality failing with dynamic IDs

Updating a React application that was originally built using Node v16 to the latest version of Node, v18,

SmartCollection in Meteor generating unpredictable outcomes

Order objects in a JavaScript array

Retrieve JSON details for various games including their properties

Ways to take an item out of your shopping cart

Encountering a CSS issue during the edit process with PHP and JavaScript

Including file format extension in the absence of one

Customize the background color of highlighted text using HTML and jQuery

unable to retrieve / interpret data from herdsmen using fetch

Executing an external JavaScript function from within an internal JavaScript code block

Closing a dropdown menu when opening another one

Navigating through Switch cases and If Statements with multiple arguments can be complex for beginners in the world of JavaScript

What is causing all Vuejs requests to fail in production with the error message "javascript enabled"?

There seems to be an issue with Node.js/Express: the page at /