Adding new content does not work in IE11?
Poky85 opened this issue · comments
I read issue #4 but still can't get to work this in IE11. It results in empty SVG added to DOM.
$("#container").html("<svg><use xlink:href=\"sprite.svg#icon\"></use></svg>");
Here is my "codepen" https://skrz.cz/storage/temp/svg4everybody/index.html
So above code really doesn't work. It occurs when inline SVG links to another use element in external SVG.
Inline SVG:
<svg>
<use xlink:href=sprite.svg#arrow-left-usage"></use>
</svg>
sprite.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol viewBox="0 0 32 32" id="arrow-left">
...
</symbol>
</defs>
<use id="arrow-left-usage" xlink:href="#arrow-left" />
</svg>
For example svg-sprite-loader produces SVG sprites with this technique.
So workaround is refer to SVG symbol directly, like so:
<svg>
<use xlink:href=sprite.svg#arrow-left"></use>
</svg>