Closed craigthings closed 7 years ago
I think a test makes the most sense. I can parse through all the svg code and inventory all the IDS. is the goal to have every single ID be unique?
is this only a problem if you need to address the SVG IDs for animations?
In most cases, when you have two separate SVG elements, IDs inside those separate elements can't conflict with each other. However, in Safari and certain older versions of Chrome, these IDs can conflict, as if separate SVGs are all combined into the same SVG element behind the scenes.
A decent solution to fix this so it doesn't create strange issues in the future would be to run through all SVG elements found in a document and insert unique IDs, or possibly test to make sure no IDs are the same.
This is similar to the "class conflict" issue, but because it doesn't behave in the same way or have the same effect, I think it makes sense for it to have its own issue.
To explain it in more detail: if you have a "kitchen" SVG element with a path ID "sandwich", and a "restaurant" SVG element also with a path ID "sandwich", then later, even if you select $('.restaurant #sandwich') it will actually return $('.kitchen #sandwich') because it came first in the document. Very strange behavior.