Multiple SVG document loaded dynamically in an HTML page

I dynamically load multiple external SVG documents in an HTML page and attach them inline. But the lineargradient defined in the first SVG file "pollute" lineargradient defined wit开发者_C百科h the same id in subsequent SVG files. It means the first loaded lineargradient defined with an ID override other lineargradient defined with the same id in other files. Any idea on how to sandbox inline SVG when there are multiple SVG inlined in an HTML page ?

Note : when using embed tag around the SVG tags, they do not "pollute" each other

Unfortunately you have to make sure your IDs are unique across the document. This is a limitation of HTML, SVG and any other markup that can be mashed together like this.

If you are using server-side script to inject the SVG files into your HTML markup, it shouldn't be too bad to replace IDs with unique ones.

You might want to also look at the importSvgString() JS function here: http://code.google.com/p/svg-edit/source/browse/trunk/editor/svgcanvas.js?r=1619#7262

If you use SVG injectors to make your SVGs inline this issue will be handled by the SVG injector. SVGInject adds a random suffix to each internally used ID to avoid conflicts (for example gradient1 may become gradient1--inject-HcdE8d27).

try this

var matrixElementos = new Array(30000);
matrixElementos[0]= Snap("#svg");
matrixElem` s`entos[1]= Snap("#svg2");