Skip to content

@html directive doesn't work as direct child of svg #5764

@csenio

Description

@csenio

Describe the bug

If I have a component like this

 // dynamic.svelte {@html `<circle cx="500" cy="500" r="200"></circle>`}

and try to render it like this

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"> <Dynamic /> </svg>

The circle isn't rendered.

To Reproduce
https://svelte.dev/repl/1a2ea34b898040e7bd52928331f6437b?version=3.31.0

Expected behavior
The circle should be rendered

Severity
Minor annoyance, there are 2 workarounds (see Additional context)

Additional context

If I wrap the html directive in a <g> tag like this:

<g> {@html `<circle cx="500" cy="500" r="200"></circle>`} </g> 

or use it without a component

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"> {@html `<circle cx="500" cy="500" r="200"></circle>`} </svg>

it works fine

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions