sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
79.35k stars 4.18k forks source link

SVG does not rendered with `<svelte:element>`+`<svelte:options namespace="svg">` #13875

Open ssssota opened 2 hours ago

ssssota commented 2 hours ago

Describe the bug

SVG does not rendered with <svelte:element> + <svelte:options namespace="svg">.

A:

<svelte:options namespace="svg" />
<script>
    const tag = 'rect';
</script>
<svelte:element this={tag} fill="black" width="10" height="90" />

B:

<svelte:options namespace="svg" />
<script>
</script>
<rect fill="black" width="10" height="90" />

A and B should be same results.

I founnd workaround.

<script>
    const tag = 'rect';
</script>
<svelte:element this={tag} xmlns="http://www.w3.org/2000/svg" fill="black" width="10" height="90" />

ref. https://github.com/ssssota/svelte-exmarkdown/issues/272

Reproduction

https://svelte.dev/playground/cc75ad8b8f4d43e8a9aa23e8adc1d740?version=5.1.0

Logs

No response

System Info

System:
    OS: macOS 14.7
    CPU: (8) arm64 Apple M1
    Memory: 244.81 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.local/share/mise/installs/node/lts/bin/node
    npm: 10.7.0 - ~/.local/share/mise/installs/node/lts/bin/npm
    pnpm: 9.12.2 - ~/.local/share/mise/installs/node/lts/bin/pnpm
    bun: 0.5.1 - ~/.bun/bin/bun
  Browsers:
    Chrome: 130.0.6723.69
    Safari: 18.0.1
  npmPackages:
    svelte: ^5.0.4 => 5.0.4

Severity

annoyance

ssssota commented 2 hours ago

https://github.com/sveltejs/svelte/blob/b979c291e274e730a9d55f758ca463b65a09eb7b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js#L149

I think this line should consider <svelte:options namespace="svg">.