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 > *');

如何在不丢失结构的情况下迭代SVG中的所有元素

1 个答案: