Gradient fill

[PlkMarudny]

I am trying to define a gradient for the area chart using <svelte:fragment> to insert the gradient definition but it does not seem to work - REPL here. In general, I cannot see any example using gradients, is this something unsupported?

[seblammers]

I was playing around a bit and just put your gradient definition into the Area.svelte instead of your App.svelte.

Take a look in this forked REPL to see what that looks like.

[PlkMarudny]

Indeed, this works. Thank you very much.

…

On Wed, May 18, 2022 at 3:22 PM Sebastian Lammers ***@***.***> wrote: I was playing around a bit and just put your gradient definition into the Area.svelte instead of your App.svelte. Take a look in this forked REPL <https://svelte.dev/repl/cb0d220ac7fa4caf8995b2a18d1f31e6?version=3.48.0> to see what that looks like. — Reply to this email directly, view it on GitHub <#76 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABBI256AE2KBVD6O5JZNXWLVKTHIVANCNFSM5WH5CM4Q> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[mhkeller]

Hm that is strange. The generated HTML is correct in the first example. I'm not sure why it isn't being picked up. I'm also confused about the fix. FWIW it also works without adding the additional <svg> tag in Area.svelte

[mhkeller]

The first example works if you add this as the fragment

<defs>
	<linearGradient id="myGradient" gradientTransform="rotate(90)">
		<stop offset="20%" stop-color="gold" />
		<stop offset="90%" stop-color="red" />
	</linearGradient>
</defs>

This may be a svelte bug. I'll work on another reproduction later without layercake

[techniq]

FWIW, I have a gradient component in LayerChart (based on LayerCake) and haven't had this issue myself.

[mhkeller]

I haven't dug into this one yet but it was very confusing before. The HTML was being created exactly as you would think it would need to be...

[mhkeller]

I'm pretty sure this is the same issue as #97 sveltejs/svelte#7450 sveltejs/svelte#7563

The linearGradient element is coming back with a namespace of "http://www.w3.org/1999/xhtml" when it should be "http://www.w3.org/2000/svg".

The fix of putting it inside a <defs> element works because svelte is better able to detect that it should be an SVG element... I've been trying to create a svelte-only REPL but I haven't for some reason...

Here's a fix adding the xmlns attr on the linearGradient element: https://svelte.dev/repl/66fdfba669cf443382c8d71175900ffc?version=3.55.0

I'll see if I can make a svelte-only version but will update the docs to talk about gradients with either this or adding the <defs> element without the slot directly

[mhkeller]

Here's the repro: https://svelte.dev/repl/2647caa253d648428dfd96b8d1d6b974?version=3.55.0

And tracking here: sveltejs/svelte#7807

[mhkeller]

This is in the docs: e459eff