Skip to content

Commit 81b3f9f

Browse files
committed
fix: improve html tag svg behaviour
1 parent 2ca3c87 commit 81b3f9f

File tree

4 files changed

+29
-1
lines changed

4 files changed

+29
-1
lines changed

.changeset/strong-gifts-smoke.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: improve html tag svg behaviour

packages/svelte/src/internal/client/reconciler.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,8 @@ export function reconcile_html(dom, value, svg) {
8989
}
9090
var clone = content.cloneNode(true);
9191
frag_nodes = Array.from(clone.childNodes);
92-
target.before(svg ? /** @type {Node} */ (clone.firstChild) : clone);
92+
frag_nodes.forEach((node) => {
93+
target.before(node);
94+
});
9395
return /** @type {Array<Text | Comment | Element>} */ (frag_nodes);
9496
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ok, test } from '../../test';
2+
3+
export default test({
4+
test({ assert, target, component }) {
5+
let svg = target.querySelector('svg');
6+
ok(svg);
7+
8+
assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
9+
assert.htmlEqual(
10+
svg.outerHTML,
11+
'<svg height="24" style="border:1px solid red;" width="24"><path d="M17 11h1a3 3 0 0 1 0 6h-1"></path><path d="M9 12v6"></path><path d="M13 12v6"></path><path d="M14 7.5c-1 0-1.44.5-3 .5s-2-.5-3-.5-1.72.5-2.5.5a2.5 2.5 0 0 1 0-5c.78 0 1.57.5 2.5.5S9.44 2 11 2s2 1.5 3 1.5 1.72-.5 2.5-.5a2.5 2.5 0 0 1 0 5c-.78 0-1.5-.5-2.5-.5Z"></path><path d="M5 8v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8"></path></svg>'
12+
);
13+
}
14+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script>
2+
let content = '<path d="M17 11h1a3 3 0 0 1 0 6h-1" /><path d="M9 12v6" /><path d="M13 12v6" /><path d="M14 7.5c-1 0-1.44.5-3 .5s-2-.5-3-.5-1.72.5-2.5.5a2.5 2.5 0 0 1 0-5c.78 0 1.57.5 2.5.5S9.44 2 11 2s2 1.5 3 1.5 1.72-.5 2.5-.5a2.5 2.5 0 0 1 0 5c-.78 0-1.5-.5-2.5-.5Z" /><path d="M5 8v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8" />'
3+
</script>
4+
5+
<svg width="24" height="24" style="border:1px solid red;">
6+
{@html content}
7+
</svg>

0 commit comments

Comments
 (0)