克隆SVG之后的SVG过滤器 [英] SVG filters after cloning SVG

问题描述

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

im Trying to work with SVG in browser. and have next Problem! i use jquery clone() on some svg element. then append it to window. then try to delete clone element.

示例代码

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

然后发生了一些神秘的事情.我用过滤器.在第二个clone-> delete之后，删除主要svg的过滤器.有一个简单的示例: http://jsfiddle.net/4vK47/1/

and then happened something mystic. i use filter. and after second clone->delete the main svg loss his filter. there is a simple example :http://jsfiddle.net/4vK47/1/

不知道该如何解决(

推荐答案

我不确定是什么原因造成的，但是部分问题可能是在克隆之后，您有两个#f1.在从未克隆的单个<svg>中定义过滤器可能会更好，让克隆的<svg>仅引用该过滤器即可.

I'm not sure exactly what causes this, but part of the problem is probably that after the clone, you have two #f1's. It might work better to define the filter in a single <svg> that you never clone, and have the cloned <svg> just reference that.

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

请参见此更新小提琴.

这篇关于克隆SVG之后的SVG过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！