克隆SVG后进行SVG过滤

即时尝试在浏览器中使用SVG。 并有下一个问题！ 我在一些svg元素上使用jquery clone（）。 然后将它附加到窗口。 然后尝试删除克隆元素。

示例代码

window.makeClone = function (){ var cloneSVG = $('svg').clone(); cloneSVG.appendTo('body'); } window.removeClone = function (){ $('svg:last').remove(); } 

然后发生了神秘的事情。 我用filter。 并且在第二次克隆后 – >删除主svg丢失他的filter。 有一个简单的例子： http ： //jsfiddle.net/4vK47/1/

不知道如何解决这个问题（

Answer 1

我不确定究竟是什么导致这种情况，但问题的一部分可能是在克隆之后，你有两个＃f1。 在您永远不会克隆的单个中定义filter可能会更好，并且克隆的只是引用它。

看到这个更新小提琴 。

Answer 2

您需要更新上的ID并更新rect上的filter。

 window.makeClone = function (){ var cloneSVG = $('svg').clone(true); cloneSVG .find("filter") .attr("id", "f" + n) .end() .find("rect") .attr("filter", "url(#f" + n + ")") .end() .appendTo('body'); n++; } window.removeClone = function (){ $('svg:last').remove(); } 

http://jsfiddle.net/M2Wjb/