如何遍历SVG中的所有元素而不丢失结构

Question

I built a tool that loads user generated SVG's to edit. But since it's user generated content, I'd like to loop through all elements in the SVG (loaded using the load() function of Snap) before appending it to the editor to set fill colors and remove unwanted elements.

The code I now have works fine as for the normalizing part, but it flattens the whole SVG hierarchy:

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;

Some of the SVG's rely on the hierarchy in the SVG file. For example, one SVG contained multiple icons (paths) in groups and all of them, except one, had a style="display: none" . When flattening the elements in the SVG all paths were shown and a big mess was the result.

So, what I need is a way to loop through all elements in the source of a SVG and normalize each individual element, before adding the contents to my own SVG (the editor).

Answer 1

I found the problem.. in the example above I create an array of all elements and after looping through this array I return the array to the icon loading method.

I changed the function to return the source variable which has been altered in the normalization-function. All elements get marked or altered in this function and before returning the resultset I remove all elements marked for deletion:

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