克隆 SVG 后的 SVG 过滤器答案

【问题标题】：SVG filters after cloning SVG克隆 SVG 后的 SVG 过滤器
【发布时间】：2013-10-03 06:00:46
【问题描述】：

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

示例代码

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

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

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

【问题讨论】：

它不正确。查看下一个答案。

标签： jquery svg clone svg-filters

【解决方案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>

见this update fiddle。

【讨论】：

谢谢，罗素！不知道将 defs 子项保存在特殊的 svg 元素中。我认为每个 svg 都必须有自己的带过滤器的 def。再次抱歉，由于声誉低，无法投票。我想它一定对我有很大帮助！

【解决方案2】：

您需要更新<filter> 上的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();
}

http://jsfiddle.net/M2Wjb/

【讨论】：

非常感谢，是的，问题出在元素的 ID 上。由于声誉低，无法投票，抱歉。
+1 to U 因为我使用这个方法来收集自己的 svg 中的所有 defs 子项。