namespaceURI seems to go wrong when I use @html in #each in SVG

[idkiller]

Describe the bug

It seems that namespaceURI is entered incorrectly when putting pattern in SVG .
I thought that @html doesn't support svg, but the problem only occurs inside "each".

let patternstr = `<pattern width="1" height="1" patternContentUnits="objectBoundingBox" id="patternx1">
<rect width="1" height="1" fill="red"></rect>
</pattern>`
let patterns = {p: patternstr}
let patternstr2 = `<pattern width="1" height="1" patternContentUnits="objectBoundingBox" id="patternx2">
<rect width="1" height="1" fill="red"></rect>
</pattern>`

<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="none">
	<defs>
		{#each Object.entries(patterns) as [p, pattern]}
			{@html pattern}
		{/each}
	</defs>
	<rect width="64" height="64" fill="url(#patternx1)" stroke="black" stroke-width="2px"></rect>
</svg>
<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="none">
	<defs>
		{@html patternstr2}
	</defs>
	<rect width="64" height="64" fill="url(#patternx2)" stroke="black" stroke-width="2px"></rect>
</svg>

The first rectangle using each has no pattern applied,
The second rectangle is the pattern applied.

If you check with the inspector in the browser, the pattern entered into each enters the namespaceURI as "http://www.w3.org/1999/xhtml", but you can see that the pattern of the second square is entered as "http://www.w3.org/2000/svg".

How can I make sure that the correct namespaceURI is also included in each?

Reproduction

https://svelte.dev/repl/2e6d05451d4e40159bae0570a422bb80?version=3.44.2

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 1.90 GB / 7.89 GB
  Binaries:
    Node: 17.0.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.1.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (96.0.1054.43)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    svelte: ^3.44.0 => 3.44.2

Severity

annoyance

[baseballyama]

To fix this, at runtime, if the parent element of the @html element has http://www.w3.org/2000/svg namespace, it needs to add this namespace recursively.
AFAIK, as per the HTML5 specification, <svg> element and its children will automatically be the http://www.w3.org/2000/svg namespace, so if it should follow this specification, it should add this process.
However, this is a trade-off for performance but I think this processing is required for preventing user confusion.

[idkiller]

Is there any way to avoid this now?
It is impossible to modify the namespaceURI of an already created node at runtime, and even if xmlns is written in the string entering @html, the namespaceURI is still entered incorrectly.
The only way I can think of is to give up svelte and put it in the runtime with js.

[baseballyama]

Unfortunately, so far I've only come up with your way...

[baseballyama]

Now we can close it because this is fixed by #7464

[Conduitry]

This should be fixed in 3.48.0 - https://svelte.dev/repl/2e6d05451d4e40159bae0570a422bb80?version=3.48.0