I've created a website where I'm using jQuery to clone and manipulate SVG content to create multiple different images within the page (I'm also making use of Keith Wood's… (čítať viac)
I've created a website where I'm using jQuery to clone and manipulate SVG content to create multiple different images within the page (I'm also making use of Keith Wood's SVG libraries to help make jQuery work with SVG).
http://httpflies.com/
This seems to be working fine initially. However, when a user clicks the graphic I then clone the clicked graphic and place that in another part of the page. At this point part of SVG content is lost. The SVG contains a number of vectors and a bitmap (for a drop-shadow). The vectors all disappear but the bitmap remains.
I've checked it out in the dev tool and the SVG content is being cloned (it seems) and can be inspected and Firefox seems to think it's in the correct part of the page etc. Yet it's not visible.
In terms of the jQuery involved it's just this:
$('#'+hash).clone().attr('id',).prependTo(targetElement);
It works fine in Chrome, Safari and Opera but I'm looking at FF 24.0 on Mac and FF 23 on Win7 and both are doing the same thing. I'm getting no errors in the console either! :-S
Thanks in advance to anyone who can shed some light ;-)