Load SVG from file to canvas and ungroup it

问题

I upload an SVG file to a canvas using FabricJS with the function

fabric.loadSVGFromURL (url, function(objects, options){
    group = fabric.util.groupSVGElements(objects, options);
    canvas.add(group).centerObject(group).renderAll();
});

This works perfectly. However the next step I want do is to ungroup the recently added group. The reason why I need to ungroup is that I want to be able to select the group's child elements by clicking on them since there is no access to these elements if they are grouped.

I found a snippet to perform an ungroup however when I do it with the group created width groupSVGElements the elements lose their original position scrambling the whole svg that I loaded.

Does anyone knows how to ungroup a loaded SVG and still keep the original positions of the elements?

回答1:

You can still access each of the element using perPixelTargetFind

When set to true, objects are "found" on canvas on per-pixel basis rather than according to

bounding box.

回答2:

I'm looking for the same solution. Did you find an answer so far?

Looking at the structure of an SVG element, I would image it should be possible to write a recursive method, which gives the children, the properties of the group and places them one level up. If you keep doing this, you should end up with all groups exploded and all properties intact (which are inherited otherwise).

Looking at SVG-EDIT, there is a function which should do this:

Function: ungroupSelectedElement
// Unwraps all the elements in a selected group (g) element. This requires
// significant recalculations to apply group's transforms, etc to its children
this.ungroupSelectedElement = function() {
var g = selectedElements[0];
if (!g) {
    return;
}
if ($(g).data('gsvg') || $(g).data('symbol')) {
    // Is svg, so actually convert to group
    convertToGroup(g);
    return;
}
if (g.tagName === 'use') {
    // Somehow doesn't have data set, so retrieve
    var symbol = svgedit.utilities.getElem(getHref(g).substr(1));
    $(g).data('symbol', symbol).data('ref', symbol);
    convertToGroup(g);
    return;
}
var parents_a = $(g).parents('a');
if (parents_a.length) {
    g = parents_a[0];
}

// Look for parent "a"
if (g.tagName === 'g' || g.tagName === 'a') {

    var batchCmd = new svgedit.history.BatchCommand('Ungroup Elements');
    var cmd = pushGroupProperties(g, true);
    if (cmd) {batchCmd.addSubCommand(cmd);}

    var parent = g.parentNode;
    var anchor = g.nextSibling;
    var children = new Array(g.childNodes.length);

    var i = 0;

    while (g.firstChild) {
        var elem = g.firstChild;
        var oldNextSibling = elem.nextSibling;
        var oldParent = elem.parentNode;

        // Remove child title elements
        if (elem.tagName === 'title') {
            var nextSibling = elem.nextSibling;
            batchCmd.addSubCommand(new svgedit.history.RemoveElementCommand(elem, nextSibling, oldParent));
            oldParent.removeChild(elem);
            continue;
        }

        children[i++] = elem = parent.insertBefore(elem, anchor);
        batchCmd.addSubCommand(new svgedit.history.MoveElementCommand(elem, oldNextSibling, oldParent));
    }

    // remove the group from the selection          
    clearSelection();

    // delete the group element (but make undo-able)
    var gNextSibling = g.nextSibling;
    g = parent.removeChild(g);
    batchCmd.addSubCommand(new svgedit.history.RemoveElementCommand(g, gNextSibling, parent));

    if (!batchCmd.isEmpty()) {addCommandToHistory(batchCmd);}

    // update selection
    addToSelection(children);
}
};