重置SVG对象的操纵元素

Question

在html中，我在对象标签中有一个相同来源的svg。在javascript中，我已经加载了这个对象的内容文档，搜索了我想要操作的元素，并对它们进行了操作。在这种情况下，我使它们的不透明度为0.现在我似乎无法让元素改变回不同的操作。

用这种方法加载身体，清除了一些东西......请原谅上下文

function clearDoge(){
    var doge = document.getElementById('doge').contentDocument;
    var artifactPaths = doge.querySelectorAll('g.artifact > path');
    for(var i=0; i<artifactPaths.length; i++) {
        artifactPaths[i].style.opacity = "0";
    }
}

然后，当用户执行动作时，我想重置整个图像并仅清除少数几个元素。要重置：

function resetDoge(){
    document.getElementById("doge-container").innerHTML = "<object id='doge' data='doge.svg' type='image/svg+xml' width='100%' height='100%' style='display: inline-block; position: absolute; top: 0; left: 0;'> </object>";
}

然后我想隐藏某些元素

function rainyDoge(){
    var doge = document.getElementById('doge').contentDocument;
    var rainyPaths = doge.querySelectorAll('g.rainy > path');
    for(var i=0; i<rainyPaths.length; i++) {
        rainyPaths[i].style.opacity = "0";
    }
}

但是，结果是svg被重置，但新的所需操作不会影响图像。