如何填充動態創建的SVG（檢查DOM是否已更新）

Question

我有一些帶有類“ paintstroke”的路徑的內嵌svg。 我將它們作為較大函數的一部分插入，然后希望在以后填充它們。 問題是，我認為在調用此代碼時（在svg創建之后立即）DOM尚未就緒，因此什么也沒發生。

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

如果我在調用上述代碼塊之前進行了setTimeout ，則通常可以使用，但是偶爾會丟失一些svg，這顯然是一個棘手的解決方案。 在嘗試填充所有.paintstroke對象之前，如何檢查它們是否准備就緒？

Answer 1

在嘗試填充所有.paintstroke對象之前，如何檢查它們是否准備就緒？

您可以使用舊的 DOMNodeInserted事件： Jsfiddle

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

請注意，此解決方案不適用於IE <10

更新：基於注釋， SVG的一個有效示例