Merge pull request #3531 from sveltejs/gh-3522

only use setAttribute with SVG spread props

Author: Rich-Harris

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -610,12 +610,14 @@ export default class ElementWrapper extends Wrapper {
 			}
 		`);
 
+		const fn = this.node.namespace === namespaces.svg ? `set_svg_attributes` : `set_attributes`;
+
 		block.builders.hydrate.add_line(
-			`@set_attributes(${this.var}, ${data});`
+			`@${fn}(${this.var}, ${data});`
 		);
 
 		block.builders.update.add_block(deindent`
-			@set_attributes(${this.var}, @get_spread_update(${levels}, [
+			@${fn}(${this.var}, @get_spread_update(${levels}, [
 				${updates.join(',\n')}
 			]));
 		`);

src/runtime/internal/dom.ts

@@ -101,6 +101,12 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes
 	}
 }
 
+export function set_svg_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
+	for (const key in attributes) {
+		attr(node, key, attributes[key]);
+	}
+}
+
 export function set_custom_element_data(node, prop, value) {
 	if (prop in node) {
 		node[prop] = value;

test/runtime/samples/svg-spread/_config.js

@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<svg height="400" width="400">
+			<rect x="50" y="50" width="100" height="75" fill="#ff0000"></rect>
+		</svg>
+	`
+};

test/runtime/samples/svg-spread/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	const style = { fill: '#ff0000', x: '50', y: '50', width: '100', height: '75'};
+</script>
+
+<svg width="400" height="400">
+	<rect {...style}/>
+</svg>