Merge pull request #2515 from canjs/2384-xlink

Fixes #2384, namespace attributes attempt to set via setAttributeNS
canjs · Dec 8, 2016 · 4db2cac · 4db2cac
2 parents 3e3ea4f + fe7651a
commit 4db2cac
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/util/attr/attr.js b/util/attr/attr.js
@@ -5,6 +5,11 @@
 
 steal("can/util/can.js", function (can) {
 
+
+	var namespaces = {
+		'xlink': 'http://www.w3.org/1999/xlink'
+	};
+
 	// Acts as a polyfill for setImmediate which only works in IE 10+. Needed to make
 	// the triggering of `attributes` event async.
 	var setImmediate = can.global.setImmediate || function (cb) {
@@ -180,7 +185,8 @@ steal("can/util/can.js", function (can) {
 						return function(el, attrName, val){
 							var first = attrName.charAt(0),
 								cachedNode,
-								node;
+								node,
+								attr;
 							if((first === "{" || first === "(" || first === "*") && el.setAttributeNode) {
 								cachedNode = invalidNodes[attrName];
 								if(!cachedNode) {
@@ -191,7 +197,14 @@ steal("can/util/can.js", function (can) {
 								node.value = val;
 								el.setAttributeNode(node);
 							} else {
-								el.setAttribute(attrName, val);
+								attr = attrName.split(':');
+
+								if(attr.length !== 1) {
+									el.setAttributeNS(namespaces[attr[0]], attrName, val);
+								}
+								else {
+									el.setAttribute(attrName, val);
+								}
 							}
 						};
 					}

diff --git a/util/attr/attr_test.js b/util/attr/attr_test.js
@@ -161,6 +161,13 @@ steal('can/util', 'can/view/stache', 'can/util/attr', 'steal-qunit', function ()
 		equal(svg.getAttribute('class'), 'my-class', 'you can pass an object to svg class');
 	});
 
+	test("set xlink:href attribute via setAttributeNS for svg-use (#2384)", function() {
+		var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
+
+		can.attr.set(use, "xlink:href", "svgUri");
+		equal(use.getAttributeNS("http://www.w3.org/1999/xlink", "href"), "svgUri", "svg-use xlink:href was set with setAttributeNS");
+	});
+
 	if (window.jQuery || window.Zepto) {
 
 		test("zepto or jQuery - bind and unbind", function () {