0

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

vijay pawar
  • 17
  • 1
  • 1
  • 5

1 Answers1

0

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.

vqf
  • 2,600
  • 10
  • 16
  • Thank you for your response and time. Yes, you are right. What I was thinking that `listen` to the `load` event but didn't realize this. I got a similar answer on [here](https://github.com/airbnb/lottie-web/issues/2589) – vijay pawar Jul 19 '21 at 02:14
  • So the code I changed to this :point_down: `player2.addEventListener("DOMLoaded", () => {console.log(document.getElementsByClassName('ads')); }) ` – vijay pawar Jul 19 '21 at 02:15