9

我正在使用 jQuery 将元素添加到嵌入式 SVG，如下所示： 

 var rect = SVG('rect');
 $(rect).attr( { x: left,
                 y: top,
                 width: right - left,
                 height: bottom - top,
                 style: style } );
 $(parentElement).append(rect);

例如，parentElement 可以是 $('g:first', svgRoot)，其中 svgRoot 指的是嵌入的 SVG 元素。

function SVG(elementName) {
        return document.createElementNS('http://www.w3.org/2000/svg', elementName);
}

这很好用，新矩形显示在浏览器中并添加到 DOM：

截屏

但是，删除此矩形失败。它仍然显示在浏览器中并存在于 DOM 中：

$(rect).remove();

我也试过

rect.parentNode.removeChild(rect);

这会导致错误消息“Uncaught TypeError: Cannot call method 'removeChild' of null”。

你知道我该如何解决吗？在我的项目中无法使用 jQuery SVG 或其他插件/框架。

4

2 回答 2

4

我最终使用groups 解决了这个问题。

我最终得到了这段代码：

var group = getGroupByName(name);
group.parentNode.removeChild(group);

...

function getGroupByName(name) {
    var container = document.getElementById("container");
    var groups = container.getElementsByTagName("g");
    for(var i=0; i<groups.length; i++) {
        if(groups[i].getAttributeNS(null, "name") === name) {
            return groups[i];
        }
    }
    return null;
}

container我的主要SVG元素在哪里。

这是经过验证的。工作正常。

编辑

正如评论中指出的那样。你可以找到这个有效的小提琴。类似于你的例子。它创建 4 个矩形并删除前 2 个。

如果要删除第一个元素，则必须指定：

$("rect").first().remove();

或者，如果您想对所有矩形做一些事情，您可以使用以下方法来解决这个问题：

$("rect").each(function() {
     ... //could remove them here
}

编辑 2

根据最后的评论，只要你有对对象的引用，你就可以使用它的变量来删除它。

这个更新的小提琴将向您展示使用lastRect您可以删除添加的最后一个矩形。

于 2013-02-06T17:27:58.397 回答
4

我发现这样做.find("*")很有帮助，我猜它会使 DOM 变平，因此忽略了 jQuery 无法处理的任何嵌套复杂性（也许......至少这是我的理论）。

因此，例如，这会删除除 rect、g、svg 元素之外的任何内容。

$("svg").find("*").not("rect, g").remove();

显示 find() 和删除 svg 元素的 jSFiddle

于 2014-03-13T09:08:44.300 回答