Support for attributes on <use> and importNode usage

.eslintrc

@@ -22,7 +22,7 @@
 		"init-declarations": [0],
 		"max-depth": [2, 6],
 		"max-nested-callbacks": [2, 3],
-		"max-params": [2, 3],
+		"max-params": [2, 4],
 		"max-statements": [0],
 		"new-parens": [0],
 		"no-alert": [2],

README.md

@@ -52,13 +52,13 @@ This spritemap displays fine in **Chrome**, **Safari 7.1+**, **Firefox**, **Edge
 
 ```html
 <svg role="img" title="CodePen">
-	<use xlink:href="map.svg#codepen"/>
+	<use href="map.svg#codepen"/>
 </svg>
 <svg role="img" title="YouTube">
-	<use xlink:href="map.svg#youtube"/>
+	<use href="map.svg#youtube"/>
 </svg>
 <svg role="img" title="Twitter">
-	<use xlink:href="map.svg#twitter"/>
+	<use href="map.svg#twitter"/>
 </svg>
 ```
 
@@ -85,7 +85,7 @@ By default, fallback images point to a PNG file in the same location as the SVG,
 ```js
 svg4everybody({
 	fallback: function (src, svg, use) {
-		// src: current xlink:href String 
+		// src: current href String 
 		// svg: current SVG Element 
 		// use: current USE Element 
 
@@ -99,7 +99,7 @@ All `<use>` elements that are descendants of an `<svg>` are checked for external
 ```js
 svg4everybody({
 	validate: function (src, svg, use) {
-		// src: current xlink:href String 
+		// src: current href String 
 		// svg: current SVG Element 
 		// use: current USE Element 
 
@@ -168,7 +168,7 @@ When this sprite is used, its title will be read aloud in [JAWS](http://www.free
 
 ```html
 <svg title="CodePen">
-	<use xlink:href="map.svg#codepen"/>
+	<use href="map.svg#codepen"/>
 </svg>
 ```
 
@@ -182,15 +182,15 @@ When a sprite is merely decoration, use `role="presentation"`.
 
 ```html
 <a href="//twitter.com/jon_neal"><svg role="presentation">
-	<use xlink:href="map.svg#twitter"/>
+	<use href="map.svg#twitter"/>
 </svg> Find me on Twitter</a>
 ```
 
 Otherwise, use `role="img"` and remember to add a description.
 
 ```html
 <a href="//twitter.com/jon_neal"><svg title="Find me on Twitter" role="img">
-	<use xlink:href="map.svg#twitter"/>
+	<use href="map.svg#twitter"/>
 </svg></a>
 ```
 

dist/svg4everybody.js

@@ -8,7 +8,7 @@
     module.exports = factory() : root.svg4everybody = factory();
 }(this, function() {
     /*! svg4everybody v2.1.9 | github.com/jonathantneal/svg4everybody */
-    function embed(parent, svg, target) {
+    function embed(parent, svg, target, use) {
         // if the target exists
         if (target) {
             // create a document fragment to hold the contents of the target
@@ -17,14 +17,20 @@
             viewBox && svg.setAttribute("viewBox", viewBox);
             // copy the contents of the clone into the fragment
             for (// clone the target
-            var clone = target.cloneNode(!0); clone.childNodes.length; ) {
-                fragment.appendChild(clone.firstChild);
+            var clone = document.importNode ? document.importNode(target, !0) : target.cloneNode(!0), g = document.createElementNS(svg.namespaceURI || "http://www.w3.org/2000/svg", "g"); clone.childNodes.length; ) {
+                g.appendChild(clone.firstChild);
             }
-            // append the fragment into the svg
+            if (use) {
+                for (var i = 0; use.attributes.length > i; i++) {
+                    var attr = use.attributes[i];
+                    "xlink:href" !== attr.name && "href" !== attr.name && g.setAttribute(attr.name, attr.value);
+                }
+            }
+            fragment.appendChild(g), // append the fragment into the svg
             parent.appendChild(fragment);
         }
     }
-    function loadreadystatechange(xhr) {
+    function loadreadystatechange(xhr, use) {
         // listen to changes in the request
         xhr.onreadystatechange = function() {
             // if the request is ready
@@ -43,7 +49,7 @@
                     // ensure the cached target
                     target || (target = xhr._cachedTarget[item.id] = cachedDocument.getElementById(item.id)), 
                     // embed the target into the svg
-                    embed(item.parent, item.svg, target);
+                    embed(item.parent, item.svg, target, use);
                 });
             }
         }, // test the ready state change immediately
@@ -84,10 +90,10 @@
                                     svg: svg,
                                     id: id
                                 }), // prepare the xhr ready state change event
-                                loadreadystatechange(xhr);
+                                loadreadystatechange(xhr, use);
                             } else {
                                 // embed the local id into the svg
-                                embed(parent, svg, document.getElementById(id));
+                                embed(parent, svg, document.getElementById(id), use);
                             }
                         } else {
                             // increase the index when the previous value was not "valid"

dist/svg4everybody.legacy.js

@@ -8,7 +8,7 @@
     module.exports = factory() : root.svg4everybody = factory();
 }(this, function() {
     /*! svg4everybody v2.1.9 | github.com/jonathantneal/svg4everybody */
-    function embed(parent, svg, target) {
+    function embed(parent, svg, target, use) {
         // if the target exists
         if (target) {
             // create a document fragment to hold the contents of the target
@@ -17,14 +17,20 @@
             viewBox && svg.setAttribute("viewBox", viewBox);
             // copy the contents of the clone into the fragment
             for (// clone the target
-            var clone = target.cloneNode(!0); clone.childNodes.length; ) {
-                fragment.appendChild(clone.firstChild);
+            var clone = document.importNode ? document.importNode(target, !0) : target.cloneNode(!0), g = document.createElementNS(svg.namespaceURI || "http://www.w3.org/2000/svg", "g"); clone.childNodes.length; ) {
+                g.appendChild(clone.firstChild);
             }
-            // append the fragment into the svg
+            if (use) {
+                for (var i = 0; use.attributes.length > i; i++) {
+                    var attr = use.attributes[i];
+                    "xlink:href" !== attr.name && "href" !== attr.name && g.setAttribute(attr.name, attr.value);
+                }
+            }
+            fragment.appendChild(g), // append the fragment into the svg
             parent.appendChild(fragment);
         }
     }
-    function loadreadystatechange(xhr) {
+    function loadreadystatechange(xhr, use) {
         // listen to changes in the request
         xhr.onreadystatechange = function() {
             // if the request is ready
@@ -43,7 +49,7 @@
                     // ensure the cached target
                     target || (target = xhr._cachedTarget[item.id] = cachedDocument.getElementById(item.id)), 
                     // embed the target into the svg
-                    embed(item.parent, item.svg, target);
+                    embed(item.parent, item.svg, target, use);
                 });
             }
         }, // test the ready state change immediately
@@ -95,10 +101,10 @@
                                         svg: svg,
                                         id: id
                                     }), // prepare the xhr ready state change event
-                                    loadreadystatechange(xhr);
+                                    loadreadystatechange(xhr, use);
                                 } else {
                                     // embed the local id into the svg
-                                    embed(parent, svg, document.getElementById(id));
+                                    embed(parent, svg, document.getElementById(id), use);
                                 }
                             } else {
                                 // increase the index when the previous value was not "valid"

lib/svg4everybody.js

@@ -1,6 +1,6 @@
 /*! svg4everybody v2.1.9 | github.com/jonathantneal/svg4everybody */
 
-function embed(parent, svg, target) {
+function embed(parent, svg, target, use) {
 	// if the target exists
 	if (target) {
 		// create a document fragment to hold the contents of the target
@@ -15,19 +15,33 @@ function embed(parent, svg, target) {
 		}
 
 		// clone the target
-		var clone = target.cloneNode(true);
+		var clone = document.importNode ? document.importNode(target, true) : target.cloneNode(true);
+
+		var g = document.createElementNS(svg.namespaceURI || 'http://www.w3.org/2000/svg', 'g');
 
 		// copy the contents of the clone into the fragment
 		while (clone.childNodes.length) {
-			fragment.appendChild(clone.firstChild);
+			g.appendChild(clone.firstChild);
+		}
+
+		if (use) {
+			for (var i = 0; use.attributes.length > i; i++) {
+				var attr = use.attributes[i];
+				if (attr.name === 'xlink:href' || attr.name === 'href') {
+					continue;
+				}
+				g.setAttribute(attr.name, attr.value);
+			}
 		}
 
+		fragment.appendChild(g);
+
 		// append the fragment into the svg
 		parent.appendChild(fragment);
 	}
 }
 
-function loadreadystatechange(xhr) {
+function loadreadystatechange(xhr, use) {
 	// listen to changes in the request
 	xhr.onreadystatechange = function () {
 		// if the request is ready
@@ -61,7 +75,7 @@ function loadreadystatechange(xhr) {
 				}
 
 				// embed the target into the svg
-				embed(item.parent, item.svg, target);
+				embed(item.parent, item.svg, target, use);
 			});
 		}
 	};
@@ -204,10 +218,10 @@ function svg4everybody(rawopts) {
 							});
 
 							// prepare the xhr ready state change event
-							loadreadystatechange(xhr);
+							loadreadystatechange(xhr, use);
 						} else {
 							// embed the local id into the svg
-							embed(parent, svg, document.getElementById(id));
+							embed(parent, svg, document.getElementById(id), use);
 						}
 					} else {
 						// increase the index when the previous value was not "valid"