From 5169ef1cb17f27b2379e29591dc4c8c7a3219a07 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 12 Mar 2018 08:14:27 -0400
Subject: [PATCH] allow SVG elements to have scoped CSS - fixes #1224

---
 src/generators/nodes/Attribute.ts              |  4 ++--
 src/generators/nodes/Element.ts                |  4 +++-
 test/runtime/samples/svg-with-style/_config.js | 17 +++++++++++++++++
 test/runtime/samples/svg-with-style/main.html  | 11 +++++++++++
 4 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 test/runtime/samples/svg-with-style/_config.js
 create mode 100644 test/runtime/samples/svg-with-style/main.html

diff --git a/src/generators/nodes/Attribute.ts b/src/generators/nodes/Attribute.ts
index fe9ad0270b..69d8808730 100644
--- a/src/generators/nodes/Attribute.ts
+++ b/src/generators/nodes/Attribute.ts
@@ -141,7 +141,7 @@ export default class Attribute {
 				shouldCache = true;
 			}
 
-			if (node._needsCssAttribute && propertyName === 'className') {
+			if (node._needsCssAttribute && name === 'class') {
 				value = `(${value}) + " ${this.generator.stylesheet.id}"`;
 			}
 
@@ -228,7 +228,7 @@ export default class Attribute {
 			}
 		} else {
 			const isScopedClassAttribute = (
-				propertyName === 'className' &&
+				name === 'class' &&
 				this.parent._needsCssAttribute &&
 				!this.generator.customElement
 			);
diff --git a/src/generators/nodes/Element.ts b/src/generators/nodes/Element.ts
index 91749eb4ae..639b9eabbe 100644
--- a/src/generators/nodes/Element.ts
+++ b/src/generators/nodes/Element.ts
@@ -216,7 +216,9 @@ export default class Element extends Node {
 		if (this._needsCssAttribute && !this.generator.customElement) {
 			if (!this.attributes.find(a => a.type === 'Attribute' && a.name === 'class')) {
 				block.builders.hydrate.addLine(
-					`${name}.className = "${this.generator.stylesheet.id}";`
+					this.namespace === namespaces.svg
+						? `@setAttribute(${name}, "class", "${this.generator.stylesheet.id}");`
+						: `${name}.className = "${this.generator.stylesheet.id}";`
 				);
 			}
 
diff --git a/test/runtime/samples/svg-with-style/_config.js b/test/runtime/samples/svg-with-style/_config.js
new file mode 100644
index 0000000000..254a94d77d
--- /dev/null
+++ b/test/runtime/samples/svg-with-style/_config.js
@@ -0,0 +1,17 @@
+export default {
+	compileOptions: {
+		cascade: false
+	},
+
+	data: {
+		x: 'bar'
+	},
+
+	html: `
+		<svg>
+			<circle class="svelte-i03x00" cx=50 cy=50 r=50 />
+			<circle class="foo svelte-i03x00" cx=150 cy=50 r=50 />
+			<circle class="bar svelte-i03x00" cx=250 cy=50 r=50 />
+		</svg>
+	`
+};
diff --git a/test/runtime/samples/svg-with-style/main.html b/test/runtime/samples/svg-with-style/main.html
new file mode 100644
index 0000000000..24c7f4487c
--- /dev/null
+++ b/test/runtime/samples/svg-with-style/main.html
@@ -0,0 +1,11 @@
+<svg>
+	<circle cx=50 cy=50 r=50/>
+	<circle class='foo' cx=150 cy=50 r=50/>
+	<circle class='{{x}}' cx=250 cy=50 r=50/>
+</svg>
+
+<style>
+	circle {
+		fill: red;
+	}
+</style>
\ No newline at end of file