如何使用多個SVG元素

Question

我正在加載一堆SVG元素，並將它們隨機放置在屏幕上。 每次加載該應用程序時，用戶都會獲得不同的構圖，某些元素可能會重復，而某些元素甚至可能不會顯示。

最初，我有一個SVG文件列表，每個文件都有一個元素。 但是這種方法似乎存在兩個問題：

1）HTTP請求過多；

2）這些元素包含帶有樣式和漸變定義的ID（不是類-從Illustrator導出時已經設置為內聯的樣式），其中一些最終會影響其他元素。 解決這兩個問題的方法是將所有元素都放在一個SVG文件中，因此Adobe Illustrator將為每個元素分配不同的ID，並且樣式不會沖突。

然后，我的想法是使用所有這些元素加載一個大型SVG文件，使用select（）提取它們並將它們附加到DOM元素中。

這聽起來合理嗎？

我可以使用JavaScript加載單個SVG，管理其中包含的元素並將其隨意添加到DOM中，還是一個糟糕的主意？

我一直在嘗試，但是一直很痛苦。 例如，我必須使用SnapSVG才能在SVG中找到這些內部元素，但無法將它們附加到DOM 。 SnapSVG可能不是正確的工具。 我看過其他 SVG工具，但它們似乎更適合使用JavaScript創建SVG形狀，而我不是這種情況，我只想提取元素並使用它們（附加到其他元素，位置，訪問其中的路徑並更改顏色，翻譯等）。

Answer 1

根據我對另一個問題的回答，這里介紹了如何從一個SVG中獲取元素，然后在另一個中<use/>它們。

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坐標。