将SVG从文件加载到画布并取消组合 [英] Load SVG from file to canvas and ungroup it

问题描述

我使用FabricJS将SVG文件上传到画布，其功能为

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.

我找到了一个片段来执行取消组合，但是当我使用组创建的宽度 groupSVGElements 元素失去原来的位置，扰乱了我加载的整个svg。

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.

有谁知道如何取消组合加载的SVG并仍保留元素的原始位置？

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

推荐答案

我正在寻找相同的解决方案。到目前为止你找到了答案吗？

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

看看SVG元素的结构，我想它应该可以编写一个递归方法，它给孩子们，组的属性并放置它们升级一级。如果你继续这样做，你应该最终爆炸所有组并且所有属性都是完整的（否则将继承）。

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

看看SVG-EDIT，有一个功能应该这样做：

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);
}
};

参见：

https://code.google.com/p/svg-编辑/来源/浏览/主干/编辑/ svgcanvas.js

这篇关于将SVG从文件加载到画布并取消组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！