SVG @html element not rentering from string

[sbstnzmr]

Describe the bug

When composing a svg from a string, elements are not rendered.

In the example both circles look the same in the DOM (with a different position and color). The element from the string only renders if no other element is in the svg. If it is alone, it works.

Reproduction

https://svelte.dev/repl/39625f96ce6941f8b7ca41f7e43738a7?version=3.47.0

Logs

No response

System Info

see REPL

Severity

annoyance

[dummdidumm]

When I open dev tools I see the element appearing in the Elements view, not sure what this hints at.

[sbstnzmr]

The second svg should have two circles. The one from the left from a string and the one from the right as a direct element.

[baseballyama]

I think the reason is that the namespace is not svg.
This is bug.

[sbstnzmr]

It works if it's the only thing in the svg tag

<svg width="{width}" height="{height}">
	{@html circle}
</svg>

It does not if there is another element

<svg width="{width}" height="{height}">
	{@html circle}
	<circle cx="{width/4*3}" cy="{height/2}" r="24" fill="#118AB2"/>
</svg>

That one looks like

<svg width="{width}" height="{height}">
	<circle cx="{width/4*3}" cy="{height/2}" r="24" fill="#118AB2"/>
</svg>

but in the inspector I can see 2 elements for the example with 2 circles.

[Prinzhorn]

I think the reason is that the namespace is not svg.
This is bug.

Yep

Array.from(document.querySelectorAll('circle')).map(e => e.namespaceURI)

0: "http://www.w3.org/2000/svg"
1: "http://www.w3.org/1999/xhtml" <================
2: "http://www.w3.org/2000/svg"
3: "http://www.w3.org/2000/svg"

[baseballyama]

related issue: #7002

[dimfeld]

I documented a workaround at #5764 (comment)

[Conduitry]

This should be fixed now in 3.48.0 - https://svelte.dev/repl/39625f96ce6941f8b7ca41f7e43738a7?version=3.48.0