使用 JavaScript 通过类名从 SVG 访问元素

Question

我正在尝试通过类名 (ads) 从 SVG 访问 <g> 标记，并使用 JavaScript 将其呈现为 HTML 的 <object> 标记。

SVG 在这里渲染

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

使用Javascript

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

但问题是当这个函数被调用时，它会得到<g>，但在控制台中，它会显示 HTMLCollection 中的零元素。

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

Microsoft Edge 控制台日志

Screenshot Image

Answer 1

加载窗口后立即调用您的 javascript 函数。当时svg图片还没有加载，它的内部元素是不存在的。根据this answer，您可以通过将脚本更改为：

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

脚本应该在加载#container2 后调用。您可以在 html 代码之后添加脚本，也可以在加载页面后运行脚本。