diff --git a/.changeset/strong-gifts-smoke.md b/.changeset/strong-gifts-smoke.md new file mode 100644 index 0000000000..202efbb480 --- /dev/null +++ b/.changeset/strong-gifts-smoke.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: improve html tag svg behaviour diff --git a/packages/svelte/src/internal/client/reconciler.js b/packages/svelte/src/internal/client/reconciler.js index c96d9460a9..80c221e448 100644 --- a/packages/svelte/src/internal/client/reconciler.js +++ b/packages/svelte/src/internal/client/reconciler.js @@ -89,6 +89,8 @@ export function reconcile_html(dom, value, svg) { } var clone = content.cloneNode(true); frag_nodes = Array.from(clone.childNodes); - target.before(svg ? /** @type {Node} */ (clone.firstChild) : clone); + frag_nodes.forEach((node) => { + target.before(node); + }); return /** @type {Array} */ (frag_nodes); } diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/_config.js new file mode 100644 index 0000000000..1e59eab130 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/_config.js @@ -0,0 +1,14 @@ +import { ok, test } from '../../test'; + +export default test({ + test({ assert, target, component }) { + let svg = target.querySelector('svg'); + ok(svg); + + assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg'); + assert.htmlEqual( + svg.outerHTML, + '' + ); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/main.svelte new file mode 100644 index 0000000000..c8d3136899 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/main.svelte @@ -0,0 +1,7 @@ + + + + {@html content} +