Skip to content

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

@idkiller

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions