We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
When a SVG component is passed as slot content, then --style-props wraps the markup in a <div />, not a <g />, which breaks the SVG.
--style-props
<div />
<g />
For example, say I have a <Circle /> component that renders a <circle />, then this works:
<Circle />
<circle />
<svg width=50 height=50> <Circle --fill="orange" /> </svg>
But when I have a <Svg /> component with a slot, and pass <Circle /> as slot content:
<Svg />
<Svg> <Circle --fill="orange" /> </Svg>
then <circle /> is wrapped in a <div />, not a <g />, which breaks the SVG.
REPL: https://svelte.dev/repl/936c0e4352e249f69747c6635d8b58c0?version=3.51.0
No response
See REPL
annoyance
The text was updated successfully, but these errors were encountered:
In order for it to work you must follow the hierarchy, first its <svg> then its <circle>.
<svg>
<circle>
Sorry, something went wrong.
No branches or pull requests
Describe the bug
When a SVG component is passed as slot content, then
--style-props
wraps the markup in a<div />
, not a<g />
, which breaks the SVG.For example, say I have a
<Circle />
component that renders a<circle />
, then this works:But when I have a
<Svg />
component with a slot, and pass<Circle />
as slot content:then
<circle />
is wrapped in a<div />
, not a<g />
, which breaks the SVG.Reproduction
REPL: https://svelte.dev/repl/936c0e4352e249f69747c6635d8b58c0?version=3.51.0
Logs
No response
System Info
Severity
annoyance
The text was updated successfully, but these errors were encountered: