Problems with manipulating an SVG image with JavaScript.
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).
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 ;-)
Chosen solution
OK this was simply down to me not being careful enough about making sure the ID's I was using in the SVG (to define gradients etc) weren't remaining unique across all the cloning and appending.
That's not just the ID's of the SVG elements themselves but the <lineargradient> elements within those SVG elements which I was referencing from within those same SVG's.
Seems like some debugging tools related to this kind of thing would be useful as it wasn't really clear that this was the problem. Just to know that there are multiple identical ID's within a DOM would be very useful.
Anyway sorry about wasting anyone's time and if you have a similar problem, think about those ID's! ;)
Read this answer in context 👍 0All Replies (1)
Chosen Solution
OK this was simply down to me not being careful enough about making sure the ID's I was using in the SVG (to define gradients etc) weren't remaining unique across all the cloning and appending.
That's not just the ID's of the SVG elements themselves but the <lineargradient> elements within those SVG elements which I was referencing from within those same SVG's.
Seems like some debugging tools related to this kind of thing would be useful as it wasn't really clear that this was the problem. Just to know that there are multiple identical ID's within a DOM would be very useful.
Anyway sorry about wasting anyone's time and if you have a similar problem, think about those ID's! ;)