Javascript 如何使用多个SVG元素

我正在加载一堆SVG元素，并在屏幕上随机定位它们。每次加载应用程序时，用户都会得到不同的合成，有些元素可能会重复，而有些元素甚至可能不会显示

最初我有一个SVG文件列表，每个文件都有一个元素。但这种方法似乎有两个问题：

1） http请求太多

2） 这些元素包含带有样式和渐变定义的ID（不是类-从Illustrator导出时已设置为内联的样式），其中一些元素最终会影响其他元素。 解决这两个问题的方法是将所有元素都放在一个SVG文件中，这样Adobe Illustrator将为每个元素分配不同的ID，并且样式不会冲突

然后，我的想法是加载一个包含所有这些元素的大SVG文件，用select（）提取它们，并将它们附加到DOM元素中

这听起来合理吗

我可以使用JavaScript加载单个SVG，管理其中包含的元素并随意将它们添加到DOM中吗？或者这是一个糟糕的想法吗

---

我一直在努力，但很痛苦。例如，我必须使用SnapSVG才能在SVG中找到这些内部元素，但是。可能SnapSVG不是实现这一点的合适工具。我已经看到了，但它们似乎更适合使用JavaScript创建SVG形状，这不是我的情况，我只想提取元素并使用它们（附加到其他元素、位置、访问其中的路径以及更改颜色、翻译等）。

根据我对您的其他问题的回答，下面是如何从一个SVG中获取元素，并将其保存到另一个SVG中

function grabSVGElement(selector) {
    var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
    var use = document.createElementNS('http://www.w3.org/2000/svg','use');
    use.setAttributeNS('http://www.w3.org/1999/xlink','href',selector);
    svg.appendChild(use);

    document.body.appendChild(svg);
    var bbox = use.getBBox();
    svg.setAttribute("viewBox",[bbox.x,bbox.y,bbox.width,bbox.height].join(" "));
    document.body.removeChild(svg);
    return svg;
}

这将创建所需的SVG，并在返回之前使用其边界框适当调整其大小。（临时添加到主体中以计算BBox）

---

然后，您可以

appendChild

将其添加到实际容器中，并根据需要为其指定X、Y坐标。

这是一种非常合理的方法，并且是一种使用图像拍摄了很长时间的方法。看看这个@阿切尔：你认为我的评论没有帮助吗？“我认为没有什么可补充的，也不认为有什么值得回答的地方。”阿彻：这句话对我很有帮助。这个问题似乎是基于意见的。@Ron他们删除了我刚才提到的评论。是的，我在征求关于如何解决这个问题的意见。我在中问了一个具体的技术问题，但到目前为止没有太大帮助，这让我觉得我采取了错误的方法。太棒了。我要花很长时间才能想到这个。我不认为我们需要依靠DOM来做这些事情。