Navigate with <a> generated with vanillajs

[quantuminformation]

I have links that are generated in svg outside svelte but would like to use the routing instead of a page refresh

Its generated like so

    const anchor = document.createElementNS("http://www.w3.org/2000/svg", "a")
            anchor.setAttributeNS(null, "href", `${person.username}`)

I can't use use:link for the <a> as in svelte files.

[mefechoel]

Is this part of the app completely separate from the svelte app? If it is the same codebase, just a different part, you could import navigate from svelte navigator and add a click listener to each link, that calls navigate with the href. Or you could add a data attribute data-svg-link="${person.name}" to each link. Then add a click listener to the document and check if the target has this data attribute and then call navigate. You need to make sure to call preventDefault on the event or the page will reload.

[mefechoel]

Did this work for you @quantuminformation?

[ecker00]

I'm in a similar situation, we have some translation strings which contain links. These a-tags are rendered like so:

{@html $t('translationTag', {
  link: `href="/myPath"`,
})}

Given a translation string like My <a %s>link</a> in a text.

I tried use:links on the parent, but seems like it's not registering when it's rendered this way.

Only solution is to use data attributes and add a global click listener? Must be other people must be running into this issue as well when working with translation strings?