diff --git a/compiler/generate/index.js b/compiler/generate/index.js
index 7d88b3264c..bcf1270494 100644
--- a/compiler/generate/index.js
+++ b/compiler/generate/index.js
@@ -80,6 +80,7 @@ export default function generate ( parsed, template ) {
let current = {
useAnchor: false,
name: 'renderMainFragment',
+ namespace: null,
target: 'target',
initStatements: [],
@@ -109,10 +110,9 @@ export default function generate ( parsed, template ) {
Element: {
enter ( node ) {
const name = current.counter( node.name );
+ let namespace = name === 'svg' ? 'http://www.w3.org/2000/svg' : current.namespace;
- const initStatements = [
- `var ${name} = document.createElement( '${node.name}' );`
- ];
+ const initStatements = [];
const updateStatements = [];
const teardownStatements = [];
@@ -160,6 +160,12 @@ export default function generate ( parsed, template ) {
${name}.setAttribute( '${attribute.name}', ${result} );
` );
}
+
+ // special case
+ // TODO this attribute must be static – enforce at compile time
+ if ( attribute.name === 'xmlns' ) {
+ namespace = value;
+ }
}
else {
@@ -298,6 +304,12 @@ export default function generate ( parsed, template ) {
updateStatements.push( declarations );
}
+ initStatements.unshift(
+ namespace ?
+ `var ${name} = document.createElementNS( '${namespace}', '${node.name}' );` :
+ `var ${name} = document.createElement( '${node.name}' );`
+ );
+
teardownStatements.push( `${name}.parentNode.removeChild( ${name} );` );
current.initStatements.push( initStatements.join( '\n' ) );
@@ -305,6 +317,7 @@ export default function generate ( parsed, template ) {
current.teardownStatements.push( teardownStatements.join( '\n' ) );
current = Object.assign( {}, current, {
+ namespace,
target: name,
parent: current
});
diff --git a/test/compiler/svg/_config.js b/test/compiler/svg/_config.js
new file mode 100644
index 0000000000..f9f1492631
--- /dev/null
+++ b/test/compiler/svg/_config.js
@@ -0,0 +1,21 @@
+import * as assert from 'assert';
+
+export default {
+ data: {
+ x: 0,
+ y: 0,
+ width: 100,
+ height: 100
+ },
+ html: ``,
+ test ( 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/main.svelte b/test/compiler/svg/main.svelte
new file mode 100644
index 0000000000..106d1c8805
--- /dev/null
+++ b/test/compiler/svg/main.svelte
@@ -0,0 +1,3 @@
+