如何使用多个SVG元素 [英] How to use multiple SVG elements

问题描述

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

I'm loading a bunch of SVG elements and randomically positioning them on the screen. For each time the app is loaded the user gets a different composition, and some elements might repeat, while some might not even show.

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

Initially I had a list of SVG files, each one with an element. But there seems to be two problems with this approach:

1)http请求过多；

1) Too many http requests;

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

2) These elements contain ids with definitions of styling and gradients (not classes - styles already set to inline when exporting from Illustrator), and some of them end up affecting other elements. A solution to both problems would be to have all elements in only one SVG file, so Adobe Illustrator will assign different ids to each element and the styles won't clash.

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

My idea then is to load a big SVG file with all these elements, extract them with select() and append them to DOM elements.

听起来一切合理吗?

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

Can I use JavaScript to load a single SVG, manage elements contained into that and add them to the DOM at will, or is it a terrible idea?

我一直在尝试，但是一直很痛苦.例如，我必须使用SnapSVG才能在SVG中找到这些内部元素，但是我无法将其附加到DOM . SnapSVG可能不是正确的工具.我看过其他 SVG工具，但它们似乎更适合使用JavaScript创建SVG形状，而我不是这种情况，我只想提取元素并使用它们(附加到其他元素，位置，访问其中的路径并更改颜色，翻译等).

I've been trying but it's been very painful. For instance, I had to use SnapSVG to be able to find these inner elements inside my SVG, but I cannot append them to the DOM. Probably SnapSVG is not the right tool for that. I've seen other SVG tools but they seem to be rather for creating SVG shapes with JavaScript which is not my case, I just want to extract elements and use them (append to other elements, position, access paths within them and change color, translate, etc).

推荐答案

从我对另一个问题的回答开始，以下是如何从一个SVG中抓取元素，然后在另一个中<use/>对其进行抓取.

Following up from my answer on your other question, here's how you can grab elements from one SVG to <use/> them in another.

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)

This should create the SVG you need, and size it appropriately using its bounding box, before returning it. (It is added to the body temporarily in order to calculate the BBox)

然后您可以appendChild将其放置到任何实际容器中，并根据需要为其提供X，Y坐标.

You can then appendChild it to whatever your real container is, and give it X,Y coordinates as desired.

这篇关于如何使用多个SVG元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！