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.
example code
window.makeClone = function (){
var cloneSVG = $('svg').clone();
cloneSVG.appendTo('body');
}
window.removeClone = function (){
$('svg:last').remove();
}
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/
dont know how to fix this (
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>
See this update fiddle.
You need to update the ID on the <filter> and update the filter on the 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/
