将 SVG 从文件加载到画布并取消组合答案

【问题标题】：Load SVG from file to canvas and ungroup it将 SVG 从文件加载到画布并取消组合
【发布时间】：2014-04-01 19:46:24
【问题描述】：

我使用带有函数的 FabricJS 将 SVG 文件上传到画布

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

这非常有效。但是，我想做的下一步是取消对最近添加的组的分组。我需要取消组合的原因是我希望能够通过单击它们来选择组的子元素，因为如果它们被分组，则无法访问这些元素。

我找到了一个snippet 来执行取消组合，但是当我使用创建宽度groupSVGElements 的组来执行此操作时，元素会失去其原始位置，从而扰乱我加载的整个 svg。

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

【问题讨论】：

这里是解决方案：stackoverflow.com/questions/15046602/…
您可以使用 svg.js，它可以在不改变视觉外观的情况下取消对元素的分组

标签： javascript html svg fabricjs

【解决方案1】：

您仍然可以使用 perPixelTargetFind 访问每个元素

当设置为true 时，对象是在画布上以像素为基础“找到”的，而不是根据

边界框。

【讨论】：

是的，我将perPixelTargetFind 设置为true，但是当您单击组对象时，会选择整个组。我想访问一个组的子对象而不取消分组（如果可能的话）

【解决方案2】：

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

查看 SVG 元素的结构，我想应该可以编写一个递归方法，该方法为子项提供组的属性并将它们放置在上一级。如果您继续这样做，您最终应该会分解所有组并且所有属性都完好无损（否则会被继承）。

查看 SVG-EDIT，有一个函数应该这样做：

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-edit/source/browse/trunk/editor/svgcanvas.js

【讨论】：