svg.js
svg.js copied to clipboard
Duplicated defs when imported
Bug report
In Codesandbox below you can see that importing SVG with defs creates duplicated <defs> with id SvgjsDefs1002:
<defs id="SvgjsDefs1002"></defs>
<defs id="SvgjsDefs1002">
<circle id="SvgjsCircle1008" r="10" cx="10" cy="10" stroke="black" stroke-width="2"></circle>
</defs>
Furhter investigation showed that empty def tag gets removed when something is added to defs again.
Fiddle
https://codesandbox.io/s/yky857kym1
According to the specs it is allowed to have multiple defs in one document. However I agree with you that this is mostly not desired. We might want to give an oppurtunity to avoid this...
@Fuzzyma - yes, but suppose their id should be different
Oh yes. We dont check for duplicated ids at import at the moment. Thanks for the headsup!
However this can become a problem. Maybe teh code relies on fixed ids in the imported svg so we cannot just replace everything... difficult...
@Fuzzyma - you got point, but I see that in exported SVG the use:href holds direct id selector:
<use id="SvgjsUse1011" xlink:href="#SvgjsCircle1008" x="25" data-identifier="1" fill="#f2b479"></use>
Seems no references to defs here.
Yes. The reference to the defs is not the problem. I was talking about the more general problem when you start assigning new id's on import. When you only assign new id's to the defs it will work but there can be a lot of duplicate id's in the imported code. Replacing them could lead to wrong references.
Imagine in your example the targeted element had a duplicate ID and you replaced it on import. All of a sudden you would reference a wrong element