handle xmlns attributes correctly

compiler/generate/visitors/attributes/addElementAttributes.js

@@ -52,7 +52,11 @@ export default function addElementAttributes ( generator, node, local ) {
 					// static attributes
 					result = JSON.stringify( value.data );
 
-					if ( propertyName ) {
+					if ( attribute.name === 'xmlns' ) {
+						// special case
+						// TODO this attribute must be static – enforce at compile time
+						local.namespace = value.data;
+					} else if ( propertyName ) {
 						local.init.push( deindent`
 							${local.name}.${propertyName} = ${result};
 						` );
@@ -61,12 +65,6 @@ export default function addElementAttributes ( generator, node, local ) {
 							${local.name}.setAttribute( '${attribute.name}', ${result} );
 						` );
 					}
-
-					// special case
-					// TODO this attribute must be static – enforce at compile time
-					if ( attribute.name === 'xmlns' ) {
-						local.namespace = value;
-					}
 				}
 
 				else {

test/compiler/svg-xmlns/_config.js

@@ -0,0 +1,21 @@
+export default {
+	data: {
+		x: 0,
+		y: 0,
+		width: 100,
+		height: 100
+	},
+
+	html: `<svg><rect x="0" y="0" width="100" height="100"></rect></svg>`,
+
+	test ( assert, component, target ) {
+		const svg = target.querySelector( 'svg' );
+		const rect = target.querySelector( 'rect' );
+
+		assert.equal( svg.namespaceURI, 'http://www.w3.org/2000/svg' );
+		assert.equal( rect.namespaceURI, 'http://www.w3.org/2000/svg' );
+
+		component.set({ width: 150, height: 50 });
+		assert.equal( target.innerHTML, `<svg><rect x="0" y="0" width="150" height="50"></rect></svg>` );
+	}
+};

test/compiler/svg-xmlns/main.html

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+	<rect x='{{x}}' y='{{y}}' width='{{width}}' height='{{height}}'/>
+</svg>