Javascript 如何在不丢失结构的情况下遍历SVG中的所有元素

我构建了一个工具，可以加载用户生成的SVG进行编辑。但由于它是用户生成的内容，所以我希望在将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源代码中的所有元素，并对每个元素进行规范化。。在上面的示例中，我创建了一个包含所有元素的数组，在循环通过该数组之后，我将该数组返回到图标加载方法

我更改了函数以返回已在规范化函数中更改的

源

变量。此函数中的所有元素都会被标记或更改，在返回结果集之前，我会删除所有标记为删除的元素：

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

---

为什么不将隐藏的svg节点附加到编辑器中？规范化的确切目的是什么？SVG通常是使用模板构建的，模板的说明/元素位于te viewbox之外。图标发布者应该在保存最终图标之前删除它们，但显然他们经常忘记这一点。因此，我必须解析正在加载的SVG，并删除viewbox之外的所有元素、隐藏的元素（以保持干净），还必须删除不需要的填充和其他属性，以确保所有图标看起来都一样。这将是一个棘手的问题：SVG中可能有SVG元素。您正在删除所有这些。。。某些形状仅由于它们在

元素中引用的元素才可见，您可以删除这些。。。有三种方法可以声明元素的填充颜色。。。对于您的问题，您必须遍历每个节点，尝试查看当您删除一个可能不需要的节点时，它是否会影响任何想要的节点。。。有点难。但是，由于生成的svg文件中似乎没有动画或脚本，因此我认为对您来说最好的方法是仅在导出时执行此清理。