javascript - 如何使用多个 SVG 元素

Question

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

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

1) http请求过多；

2) 这些元素包含具有样式和渐变定义的 id(不是类 - 从 Illustrator 导出时样式已经设置为内联)，其中一些最终会影响其他元素。解决这两个问题的方法是将所有元素都放在一个 SVG 文件中，这样 Adob​​e Illustrator 就会为每个元素分配不同的 ID，这样样式就不会发生冲突。

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

这一切听起来合理吗？

我可以使用 JavaScript 加载单个 SVG、管理其中包含的元素并随意将它们添加到 DOM 中吗？还是一个糟糕的主意？

我一直在努力，但一直很痛苦。例如，我必须使用 SnapSVG 才能在我的 SVG 中找到这些内部元素，但是 I cannot append them to the DOM .可能 SnapSVG 不是合适的工具。我看过other SVG tools但它们似乎更适合用 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临时加入body)

然后您可以 appendChild无论您的真实容器是什么，都可以根据需要为其指定 X、Y 坐标。