allow SVG elements to have scoped CSS - fixes #1224

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
 			);

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}";`
 				);
 			}
 

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>
+	`
+};

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>