javascriptsvgdomdomdocumenthtmlcollection

Access an element by class name from SVG using JavaScript


I am trying to access <g> tag from SVG by class name (ads) and which is rendered using JavaScript into <object> tag of HTML.

SVG is rendered here

<object id="container2" type="type=" image/svg+xml"></object>

Using Javascript

player2 = lottie.loadAnimation({
            container: document.getElementById('container2'),
            renderer: 'svg',
            loop: false,
            autoplay: true,
            path: 'assets/mindmap2.json'
        });

But the issue is When this function called, it gets <g> but in the console, it shows the zero elements inside the HTMLCollection.

 window.addEventListener("load", () => {
        console.log(document.getElementsByClassName('ads'));
    });

Microsoft Edge Console Log

Screenshot Image


Solution

  • Your javascript function gets called right after loading the window. At that time, the svg picture has not been loaded, and its inner elements do not exist. According to this answer, you might find the elements by changing the script to:

    const el = document.getElementById('container2');
    el.addEventListener("load", () => {
        console.log(document.getElementsByClassName('ads'));
    });
    

    The script should be called after loading #container2. You can just add the script after the html code or run the script after loading the page.