Fixes references to inline SVG elements when the <base> tag is in use.

baseTagRelativeLinkFixer.js

/**
 * 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";
	
	/**
	* Mapping of selectors and attributes to make this work for everything, not just SVGs
	*/ 
	var map = [
		{
			selector: 'use[*|href]',
			attribute: 'xlink:href'
		},
		{
			selector: 'a[href]',
			attribute: 'href'
		}
	];

	/**
	* 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, "");
			
		function prepareForBaseTag(mapObject) {
			/**
			*  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(mapObject.selector))
	
				/**
				* 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(mapObject.attribute).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(mapObject.attribute, baseUrl + element.getAttribute(mapObject.attribute));
				});			
		}
		
		for (var i = 0; i < map.length; i++) {
			prepareForBaseTag(map[i]);
		}

	}, false);

}(document, window));