我有一些内联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 的工作示例