diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 0ad46618faf..4f0b49729c8 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -806,12 +806,14 @@ export default class ElementWrapper extends Wrapper {
if (this.node.is_dynamic_element) {
// call attribute bindings for custom element if tag is custom element
const tag = this.node.tag_expr.manipulate(block);
- const attr_update = b`
- if (/-/.test(${tag})) {
- @set_custom_element_data_map(${this.var}, ${data});
- } else {
- ${fn}(${this.var}, ${data});
- }`;
+ const attr_update = this.node.namespace === namespaces.svg
+ ? b`${fn}(${this.var}, ${data});`
+ : b`
+ if (/-/.test(${tag})) {
+ @set_custom_element_data_map(${this.var}, ${data});
+ } else {
+ ${fn}(${this.var}, ${data});
+ }`;
block.chunks.hydrate.push(attr_update);
block.chunks.update.push(b`
${data} = @get_spread_update(${levels}, [${updates}]);
diff --git a/test/js/samples/svelte-element-svg/expected.js b/test/js/samples/svelte-element-svg/expected.js
index f9ca24ff30f..36ce583ef10 100644
--- a/test/js/samples/svelte-element-svg/expected.js
+++ b/test/js/samples/svelte-element-svg/expected.js
@@ -48,8 +48,10 @@ function create_dynamic_element(ctx) {
append(svelte_element1, svelte_element0);
},
p(ctx, dirty) {
- set_svg_attributes(svelte_element0, svelte_element0_data = get_spread_update(svelte_element0_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
- set_svg_attributes(svelte_element1, svelte_element1_data = get_spread_update(svelte_element1_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
+ svelte_element0_data = get_spread_update(svelte_element0_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]);
+ set_svg_attributes(svelte_element0, svelte_element0_data);
+ svelte_element1_data = get_spread_update(svelte_element1_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]);
+ set_svg_attributes(svelte_element1, svelte_element1_data);
},
d(detaching) {
if (detaching) detach(svelte_element1);
@@ -108,4 +110,4 @@ class Component extends SvelteComponent {
}
}
-export default Component;
\ No newline at end of file
+export default Component;
diff --git a/test/runtime/samples/dynamic-element-svg/_config.js b/test/runtime/samples/dynamic-element-svg/_config.js
new file mode 100644
index 00000000000..d0fb37fb6ac
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-svg/_config.js
@@ -0,0 +1,10 @@
+export default {
+ html: '',
+
+ test({ assert, target }) {
+ const svg = target.querySelector('svg');
+ const rect = target.querySelector('path');
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(rect.namespaceURI, 'http://www.w3.org/2000/svg');
+ }
+};
diff --git a/test/runtime/samples/dynamic-element-svg/main.svelte b/test/runtime/samples/dynamic-element-svg/main.svelte
new file mode 100644
index 00000000000..2dc4d548141
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-svg/main.svelte
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file