如何遍歷SVG中的所有元素而不丟失結構

Question

我構建了一個加載用戶生成的SVG進行編輯的工具。 但是，由於它是用戶生成的內容，因此我想遍歷SVG中的所有元素（使用Snap的load（）函數加載），然后再將其添加到編輯器中以設置填充顏色並刪除不需要的元素。

我現在擁有的代碼對於規范化部分工作正常，但它使整個SVG層次結構變得平坦：

var allNodes = source.selectAll('*:not(svg):not(defs):not(desc):not(title)');
allNodes.forEach(function(subelement) {
    // loop through all elements
    logocreator.normalizeSvgElement(subelement, viewBox);
});
return allNodes;

某些SVG依賴於SVG文件中的層次結構。 例如，一個SVG分組包含多個圖標（路徑），除一個以外，所有其他圖標均具有style="display: none" 。 當展平SVG中的元素時，會顯示所有路徑，結果是一團糟。

因此，我需要的是一種在將內容添加到我自己的SVG（編輯器）之前，遍歷SVG源代碼中所有元素並對每個元素進行規范化的方法。

Answer 1

我發現了問題..在上面的示例中，我創建了一個所有元素的數組，並在遍歷該數組后將數組返回到圖標加載方法。

我更改了函數以返回在標准化函數中已更改的source變量。 所有元素都在此函數中被標記或更改，在返回結果集之前，我刪除了所有標記為刪除的元素：

var allNodes = source.selectAll('*');
allNodes.forEach(function(subelement) {
    logocreator.normalizeSvgElement(subelement, viewBox);
});
source.selectAll('[data-removeme="true"]').remove();
return source.selectAll('svg > *');