Jquery 克隆SVG后的SVG过滤器

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

示例代码

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

然后发生了一件神秘的事。我使用过滤器。在第二次克隆->删除主svg后，将丢失其过滤器。有一个简单的例子：

---

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

我不知道确切的原因是什么，但部分问题可能是克隆后，您有两个f1。最好在一个从未克隆过的

中定义筛选器，并让克隆的

引用它

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height=0px width=0px id="defs">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height=100px width=100px id="rect">
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

---

请参阅。

我不确定这到底是什么原因造成的，但部分问题可能是克隆后，您有两个f1。最好在一个从未克隆过的

中定义筛选器，并让克隆的

引用它

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height=0px width=0px id="defs">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height=100px width=100px id="rect">
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

---

请参阅。

您需要更新

上的ID，并更新

rect

上的过滤器

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

---

您需要更新

上的ID，并更新

rect上的过滤器

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

非常感谢，是的，确实是元素ID的问题。由于声誉低，无法投票，抱歉。+1对你，因为我使用此方法收集自己svg中的所有defs子元素。非常感谢，是的，确实是元素ID的问题。无法投票，因为声誉低，抱歉。+1对你，因为我使用此方法收集所有defs children in own svg.it's not a correct.请参阅nexts answers.it not a correct.请参阅nexts answers.谢谢，Russell！不知道如何将defs children保存在特殊的svg元素中。我认为每个svg都必须有自己的带有过滤器的DEF。再次抱歉，由于声誉低下，无法投票。我认为这一定对我有很大帮助！谢谢，Russell！不知道t在一个特殊的svg元素中保存def子元素。我认为每个svg都必须有自己的带有过滤器的def。再次抱歉，由于声望低，无法投票。我认为这一定对我有很大帮助！