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
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments