jquery - 克隆 SVG 后的 SVG 过滤器

Question

我正在尝试在浏览器中使用 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/

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

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>

参见this update fiddle .