diff --git a/compiler/generate/visitors/attributes/addElementAttributes.js b/compiler/generate/visitors/attributes/addElementAttributes.js index 0189f988ea..6a5637e52f 100644 --- a/compiler/generate/visitors/attributes/addElementAttributes.js +++ b/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 { diff --git a/test/compiler/svg-xmlns/_config.js b/test/compiler/svg-xmlns/_config.js new file mode 100644 index 0000000000..37d94a1609 --- /dev/null +++ b/test/compiler/svg-xmlns/_config.js @@ -0,0 +1,21 @@ +export default { + data: { + x: 0, + y: 0, + width: 100, + height: 100 + }, + + html: ``, + + 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, `` ); + } +}; diff --git a/test/compiler/svg-xmlns/main.html b/test/compiler/svg-xmlns/main.html new file mode 100644 index 0000000000..29e96293a5 --- /dev/null +++ b/test/compiler/svg-xmlns/main.html @@ -0,0 +1,3 @@ + + +