/** | |
* SVG Fixer | |
* | |
* Fixes references to inline SVG elements when the <base> tag is in use. | |
* Firefox won't display SVG icons referenced with | |
* `<svg><use xlink:href="#id-of-icon-def"></use></svg>` when the <base> tag is on the page. | |
* | |
* More info: | |
* - http://stackoverflow.com/a/18265336/796152 | |
* - http://www.w3.org/TR/SVG/linking.html | |
* | |
* One would think that setting the `xml:base` attribute fixes things, | |
* but that is being removed from the platform: https://code.google.com/p/chromium/issues/detail?id=341854 | |
*/ | |
(function(document, window) { | |
"use strict"; | |
/** | |
* Initialize the SVG Fixer after the DOM is ready | |
*/ | |
document.addEventListener("DOMContentLoaded", function() { | |
/** | |
* Current URL, without the hash | |
*/ | |
var baseUrl = window.location.href | |
.replace(window.location.hash, ""); | |
/** | |
* Find all `use` elements with a namespaced `href` attribute, e.g. | |
* <use xlink:href="#some-id"></use> | |
* | |
* See: http://stackoverflow.com/a/23047888/796152 | |
*/ | |
[].slice.call(document.querySelectorAll("use[*|href]")) | |
/** | |
* Filter out all elements whose namespaced `href` attribute doesn't | |
* start with `#` (i.e. all non-relative IRI's) | |
* | |
* Note: we're assuming the `xlink` prefix for the XLink namespace! | |
*/ | |
.filter(function(element) { | |
return (element.getAttribute("xlink:href").indexOf("#") === 0); | |
}) | |
/** | |
* Prepend `window.location` to the namespaced `href` attribute value, | |
* in order to make it an absolute IRI | |
* | |
* Note: we're assuming the `xlink` prefix for the XLink namespace! | |
*/ | |
.forEach(function(element) { | |
element.setAttribute("xlink:href", baseUrl + element.getAttribute("xlink:href")); | |
}); | |
}, false); | |
}(document, window)); |
This comment has been minimized.
This comment has been minimized.
GuillaumeGBzh
commented
Jan 6, 2016
Thanks for this polyfill ! |
This comment has been minimized.
This comment has been minimized.
jbouzekri
commented
Jan 26, 2016
Same here. Many thanks !!!! |
This comment has been minimized.
This comment has been minimized.
saadshahd
commented
Jan 30, 2016
Thanks a lot |
This comment has been minimized.
This comment has been minimized.
Klenkes
commented
Feb 19, 2016
Huge thanks from me too! |
This comment has been minimized.
This comment has been minimized.
w8r
commented
Apr 7, 2016
@leonderijke, thank you big time! if only I could get the time back I wasted finding out what causes that in a huge app)) |
This comment has been minimized.
This comment has been minimized.
havarnov
commented
Apr 29, 2016
As far as I can tell this is an issue in Chrome as well. |
This comment has been minimized.
This comment has been minimized.
felixpfeiffer
commented
May 13, 2016
Thanx for that. You saved my life! |
This comment has been minimized.
This comment has been minimized.
gera2ld
commented
May 17, 2016
This is great! But still has problem in Chrome. |
This comment has been minimized.
This comment has been minimized.
p-hebert
commented
May 23, 2016
You good sir, have just saved me from seeing a 70+ hour plugin fail miserably because its icons wouldn't show. |
This comment has been minimized.
This comment has been minimized.
lastmjs
commented
Aug 24, 2016
Thanks a ton! Can we get a license for this? |
This comment has been minimized.
This comment has been minimized.
adyz
commented
Aug 31, 2016
Sometimes I have some You can add |
This comment has been minimized.
This comment has been minimized.
mattiLeBlanc
commented
Jan 20, 2017
Great find, it took me a while to figure out the my BASE tag was the culprit. |
This comment has been minimized.
This comment has been minimized.
lnked
commented
Feb 7, 2017
Thanks! |
This comment has been minimized.
This comment has been minimized.
scottadamsmith
commented
Apr 3, 2017
This saved my team the work of re-exporting all of our SVGs, thanks! |
This comment has been minimized.
This comment has been minimized.
rik
commented
Apr 24, 2017
This workaround will soon not be needed anymore. Firefox and Edge are changing behaviours so by October 2017, we can remove it from our projects. |
This comment has been minimized.
This comment has been minimized.
javiergbas
commented
May 23, 2017
Saved my day, thanks!! |
This comment has been minimized.
This comment has been minimized.
ztd127
commented
Jun 7, 2017
Thanks!!!!! |
This comment has been minimized.
This comment has been minimized.
bbeckmann
commented
Jun 29, 2017
Thank you very much, Sir! |
This comment has been minimized.
This comment has been minimized.
RohinMohanadas
commented
Jul 7, 2017
•
The same behavior occurs with "fill" attribute as well. Added one more statement to handle that in the workaround. Not sure if there will be more attributes that may be affected by tag.
|
This comment has been minimized.
This comment has been minimized.
matheussguedes
commented
Aug 23, 2017
Thank you so much! |
This comment has been minimized.
This comment has been minimized.
WoodyWoodsta
commented
Dec 19, 2017
This is fantastic. Thank you |
This comment has been minimized.
This comment has been minimized.
SatyaAchanta
commented
Dec 29, 2017
•
Hello Everyone, Sorry if I my question is too naive. It seems I am having same issue in Microsoft Edge. How can I use the mentioned code snippet in my application ?. Do I have to include it in polyfills.ts file ?. Can someone help me out please ?. I tried adding it in polyfills.ts and adding this snippet using script tag in index.html file, but still not seeing icons in Edge and FF |
This comment has been minimized.
This comment has been minimized.
SatyaAchanta
commented
Jan 2, 2018
Just giving it another shot, is anyone still active here to help me out ? |
This comment has been minimized.
This comment has been minimized.
ignlg
commented
Apr 9, 2018
As a note, the |
This comment has been minimized.
ianpetzer commentedDec 8, 2015
Thanks... This helped me to get my svgs working on Firefox