Question

我有一些带有“painttroke”类路径的内联svgs。我将它们作为更大函数的一部分插入，然后我希望之后填充它们。麻烦的是，我不认为在调用此代码时（在svg创建之后立即）DOM已准备就绪，因此没有任何反应。

var paths = document.getElementsByClassName("paintstroke");
for(var i = 0; i < paths.length; i++){
    paths[i].style.fill = colors[i];
}

如果我在调用上面的块之前执行setTimeout它通常可以正常工作，但偶尔会错过一些svgs并且显然是一个hacky解决方案。在尝试填充它们之前，如何检查所有.paintstroke个对象是否准备就绪？

Answer 1

如何在尝试填充之前检查所有.paintstroke对象是否已准备就绪？

您可以使用旧 DOMNodeInserted活动：Jsfiddle

document.addEventListener('DOMNodeInserted', function (event) {
    if (event.target.classList.contains("paintstroke")) {
        // do the trick here.
    }
});

请注意，此解决方案不适用于IE＆lt; 10

更新：根据评论，working example with SVG

如何填充动态创建的SVG（检查DOM已更新）

1 个答案: