Document SVG multiple chargé dynamiquement dans une page HTML

Question

Je charge dynamiquement plusieurs documents SVG externes dans une page HTML et les attache en ligne. Mais le dégradé linéaire défini dans le premier fichier SVG "pollute" lineargradient défini avec le même identifiant dans les fichiers SVG suivants. Cela signifie que le premier gradient linéaire chargé défini avec un ID écrase tout autre gradient linéaire défini avec le même identifiant dans d'autres fichiers. Une idée sur la façon de bac à sable SVG en ligne quand il y a plusieurs SVG inline dans une page HTML?

Remarque: lors de l'utilisation balise embed autour des balises SVG, ils ne « pollue » les uns des autres

Answer 1

Malheureusement vous devez vous assurer que vos identifiants sont uniques à travers le document. C'est une limitation de HTML, SVG et tout autre balisage qui peut être mélangé comme ceci.

Si vous utilisez un script côté serveur pour injecter les fichiers SVG dans votre balise HTML, il ne devrait pas être trop mauvais de remplacer les ID par des ID uniques.

Vous pouvez également consulter la fonction importSvgString() JS ici: http://code.google.com/p/svg-edit/source/browse/trunk/editor/svgcanvas.js?r=1619#7262