Question

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.

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

1) Too many http requests;

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.

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

Does all that sound reasonable?

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?

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).

Answer 1

根据您对其他问题的回答，以下是如何将一个SVG中的元素从另一个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坐标。

How to use multiple SVG elements

1 个答案: