克隆後的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

回答

相關問題