即时尝试在浏览器中使用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/
不知道如何解决这个问题(
答案 0 :(得分:2)
我不确定究竟是什么导致这种情况,但部分问题可能是在克隆之后,你有两个#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>
答案 1 :(得分: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();
}