如何填充动态创建的SVG(检查DOM是否更新）

How to fill dynamically-created SVGs (checking DOM is updated)

本文关键字：检查 SVG 是否 更新 DOM 动态 何填充 填充 创建      更新时间：2023-09-26

我有一些内联svg，路径为"paintstroke"类。我将它们作为一个更大函数的一部分插入，然后我希望稍后填充它们。问题是，我认为在调用此代码时（在创建svg之后）DOM还没有准备好，所以什么都没发生。

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

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

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

您可以使用旧DOMNodeInserted事件：Jsfidle

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

请注意，此解决方案在IE<10

UPDATE：基于注释，SVG 的工作示例

相关文章：