克隆后，SVG SVG滤镜(SVG filters after cloning SVG)

我试着在浏览器中使用SVG工作。 并有下一个问题！ 使用jQuery克隆（）一些svg元素上。 然后将其附加到窗口。 然后再试着删除克隆元素。

示例代码

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

然后发生了什么神秘的。 我使用的过滤器。 和第二clone-后>删除主SVG损失了过滤器。 有一个简单的例子： http://jsfiddle.net/4vK47/1/

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

Answer 1:

我不知道究竟是什么原因导致的，但问题的一部分是可能是克隆后，你有两个＃F1的。 它可能会更好地工作在一个单一的定义过滤器<svg>你从来没有克隆，并且已经克隆<svg>只是引用。

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

请参阅此更新小提琴 。

Answer 2:

您需要更新在所述ID <filter>和更新在所述过滤器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();
}

http://jsfiddle.net/M2Wjb/

文章来源: SVG filters after cloning SVG