使用 JavaScript 从 SVG 访问名称为 class 的元素

Question

我正在尝试通过 class 名称（ads）从 SVG 访问 <g> 标签，并使用 JavaScript 渲染到 <object> 标签中HTML.

此处呈现 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> 但在控制台中，它显示 HTML 集合中的零元素。

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

Microsoft Edge 控制台日志

Screenshot Image

Answer 1

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

来找到元素

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

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

使用 JavaScript 从 SVG 访问名称为 class 的元素

Access an element by class name from SVG using JavaScript

javascript

svg

dom

domdocument

htmlcollection