Skip to content

Instantly share code, notes, and snippets.

@leonderijke
Last active June 17, 2024 07:57
Show Gist options
  • Save leonderijke/c5cf7c5b2e424c0061d2 to your computer and use it in GitHub Desktop.
Save leonderijke/c5cf7c5b2e424c0061d2 to your computer and use it in GitHub Desktop.
Fixes references to inline SVG elements when the <base> tag is in use.
/**
* 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));
@lnked
Copy link

lnked commented Feb 7, 2017

Thanks!

@scottadamsmith
Copy link

This saved my team the work of re-exporting all of our SVGs, thanks!

@rik
Copy link

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.

@javiergbas
Copy link

Saved my day, thanks!!

@ztd127
Copy link

ztd127 commented Jun 7, 2017

Thanks!!!!!

@bbeckmann
Copy link

Thank you very much, Sir! 👍

@RohinMohanadas
Copy link

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.

/* * Find alluseelements with a namespacedfill` attribute, e.g.
*
*
* See: http://stackoverflow.com/a/23047888/796152
*/

        [].slice.call(document.querySelectorAll("use[*|fill]"))

        /**
        * Filter out all elements whose namespaced `fill` attributes doesn't
        * which doesnt have cross referenced values
        *
        * Note: we're assuming the `url(` prefix for the cross referenced fills !
        */
        .filter(function(element) {
            return (element.getAttribute("fill").indexOf("url(") === 0);
        })

        /**
        * Insert `window.location` to the `fill` attribute value,
        * in order to make it an absolute IRI
        *
        */
        .forEach(function(element) {
            var attrVal = element.getAttribute("fill");
            var idx = attrVal.indexOf("url(");
            element.setAttribute("fill",attrVal.slice(0,idx+4)+baseUrl+ attrVal.slice(idx+4));
        });   `

@matheussguedes
Copy link

Thank you so much!

@WoodyWoodsta
Copy link

This is fantastic. Thank you 👍

@SatyaAchanta
Copy link

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

@SatyaAchanta
Copy link

Just giving it another shot, is anyone still active here to help me out ?

@ignlg
Copy link

ignlg commented Apr 9, 2018

As a note, the mask attribute is affected too. And this kind of fix is still needed for Safari (iOS / macOS), btw.

@ValentinFunk
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment