xlink:href filename#id renders as #id only

[hernan-almeida]

In IE 11, when using svgxuse.js I noticed that my xlink:href value in the source code is not the same as what renders in the DOM.

<div class="glyph fs1">
    <svg class="icon icon-palette"><use xlink:href="symbol-defs.svg#icon-palette"></use></svg>
</div>

turns out like this:

<div class="glyph fs1">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-paper-plane">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-paper-plane" />
    </svg>
</div>

This is a problem if you are switching svg files dynamically. Without the full path, IE keep referencing the previous file. I run into this problem because we have icon sprite sheets for multiple sizes and #id points to multiple matches as I switch around sprite sheets.

I have:

icons.svg
/24/icons.svg
/48/icons.svg

All of them have the same set of icons (same id's) but the larger icons have more detail. if I swap the url in the xlink:href using JavaScript, I end up rendering the wrong svg because svgxuse.js trims everything but the #.

[StK88]

+1

[simianarmy]

Was this fixed? The author of the PR above seems to have given up

[gempir]

This isn't inherently a bug this is how the library operates. It replaces the href because the svg is attached to the current body so it only needs the #id to reference it.

If you want to dynamically switch you will have to insert the whole path again. And then if it fails to load in IE11 the library will attach the new svg to the body again and change the href to only an #id again.

Not sure how good the last part works of it watching for the change of a href.