Skip to content

csr breaks "a" link elements contained inside an "svg" element #8242

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
peufo opened this issue Dec 21, 2022 · 3 comments
Closed

csr breaks "a" link elements contained inside an "svg" element #8242

peufo opened this issue Dec 21, 2022 · 3 comments
Labels
svelte This feature can't be implemented without changes to Svelte itself

Comments

@peufo
Copy link

peufo commented Dec 21, 2022

Describe the bug

When client-side rendering is enabled, links inside an Svg component disappear.
Still, no problem if a native svg element is used.

Reproduction

See: https://github.com/peufo/kit-bug-report-link-svg
or

  1. Make sure csr is enabled (default)
  2. Create a simple SVG component "Svg.svelte"
<svg
  viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <slot />
</svg>
  1. Use it with links inside
<script>
  import Svg from './Svg.svelte'
</script>
<Svg>
  <a href="/42">
    <text x="50" y="90" text-anchor="middle"> test link </text>
  </a>
</Svg>

Logs

No response

System Info

System:
    OS: Linux 5.10 Kali GNU/Linux Rolling 2022.3
    CPU: (12) x64 Intel(R) Xeon(R) E-2176M  CPU @ 2.70GHz
    Memory: 5.02 GB / 7.53 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.volta/tools/image/node/18.12.1/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 8.19.2 - ~/.volta/tools/image/node/18.12.1/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.0
    @sveltejs/kit: ^1.0.0 => 1.0.1
    svelte: ^3.54.0 => 3.55.0
    vite: ^4.0.0 => 4.0.2

Severity

annoyance

Additional Information

No response

@gtm-nayan gtm-nayan added the svelte This feature can't be implemented without changes to Svelte itself label Dec 21, 2022
@gtm-nayan
Copy link
Contributor

Seems like a Svelte "bug" instead, see https://svelte.dev/repl/8c9bb576f1f348a3953f391a9e90a27f?version=3.55.0

For the a inside the SVG tag, the compiler identifies it as an SVG anchor and uses svg_element to create it, whereas for the slotted one the compiler has no way of knowing it's inside an SVG so it just creates a normal anchor element which doesn't work the same way

@peufo peufo changed the title csr breaks "a" link elements contained in an "svg" element csr breaks "a" link elements contained inside an "svg" element Dec 21, 2022
@peufo
Copy link
Author

peufo commented Dec 21, 2022

Well seen,

This opened issue already exists in the svelte project, I missed it: /sveltejs/svelte/issues/7807

Thanks for the explanation, I close this one.

@peufo peufo closed this as completed Dec 21, 2022
@peufo
Copy link
Author

peufo commented Dec 25, 2022

@gtm-nayan Mea culpa! Svelte provides a "namespace" option to signal to the compiler the context of a component:

<svelte:options namespace="svg"/>

see https://svelte.dev/repl/a4a6543ca9fb405da054b87ab198f728?version=3.55.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
svelte This feature can't be implemented without changes to Svelte itself
Projects
None yet
Development

No branches or pull requests

2 participants