diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 9e267b9ad0..d5e5b2d634 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/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')} ])); `); diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 91425fbf85..29b7926715 100644 --- a/src/runtime/internal/dom.ts +++ b/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; diff --git a/test/runtime/samples/svg-spread/_config.js b/test/runtime/samples/svg-spread/_config.js new file mode 100644 index 0000000000..a198120a08 --- /dev/null +++ b/test/runtime/samples/svg-spread/_config.js @@ -0,0 +1,7 @@ +export default { + html: ` + + + + ` +}; diff --git a/test/runtime/samples/svg-spread/main.svelte b/test/runtime/samples/svg-spread/main.svelte new file mode 100644 index 0000000000..a7a143814b --- /dev/null +++ b/test/runtime/samples/svg-spread/main.svelte @@ -0,0 +1,7 @@ + + + + +