克隆后的SVG过滤器SVG

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

示例代码

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

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

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

来源

2013-09-27 HuekoMundo

其不正确的。看下一个答案。 – HuekoMundo

我不知道究竟是什么原因导致的，但问题的一部分是可能是克隆后，你有两个＃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。

来源

2013-09-27 03:40:45

谢谢，罗素！不知道如何在特殊的svg元素中保存defs儿童。我认为每个svg都必须有自己的过滤器。对不起，因为低信誉而不能投票。我认为它必须帮助我很多！ – HuekoMundo

您需要更新<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/

来源

2013-09-27 03:58:31 Malk

非常感谢，真的，问题是与元素的Ids。因为声誉低而不能投票，对不起。 – HuekoMundo

+1给U，因为我用这个方法来收集自己的svg中的所有defs儿童。 – HuekoMundo

克隆后的SVG过滤器SVG

回答

相关问题