Implementing complex svg's?

lululucaschae · 2024-05-14T05:50:30.332+00:00

I can't seem to find a way to implement svg elemetns with tags inside. The minimum reporducible case would be creating a rectangle path with a gradient fill, which requires a bare minimum as shown below. https://codepen.io/lululucas/pen/vYwOLoJCopying and pasting this svg element shows an empty div box with specified path dimension — and after experimenting a bit, I believe it's the tag that's causing the issue?Any guide on how to achieve this would be very helpful!

lululucaschae
1 year ago
I can't seem to find a way to implement svg elemetns with <defs> tags inside. The minimum reporducible case would be creating a rectangle path with a gradient fill, which requires a bare minimum <def> as shown below.
https://codepen.io/lululucas/pen/vYwOLoJ

Copying and pasting this svg element shows an empty div box with specified path dimension — and after experimenting a bit, I believe it's the <defs> tag that's causing the issue?

Any guide on how to achieve this would be very helpful!
Jacob Kofoed
1 year ago
Thanks for reporting this issue @lululucaschae 👍 It looks like toddle has an issue rendering the standard SVG tag linearGradient as it has an uppercase letter. I will look into fixing it this week. I'll keep you updated here - Should work out of the box with no changes on your side 👌
Jacob Kofoed
1 year ago
Hi @lululucaschae I pushed some changes for this now. Can you try to re-copy/paste the code into toddle to see if it works for you now?
lululucaschae
1 year ago
Hmm, I've copied and pasted the SVG in Codepen as is, and still shows a black box
Jacob Kofoed
1 year ago
Alright, I probably missed something then. Let me push some changes quickly and get back to you 👍
lululucaschae
1 year ago
Thanks Jacob! If this is an issue of linearGradient having an uppercase letter, will this fix also solve clipPath not working inside svg?
Jacob Kofoed
1 year ago
It should work for everything, yes 👍 It seems like classes are not copy/pasted automatically. I will check with the team if we can fix that as well. For now you just need to add class in the attribute panel on the two <stop> elements. One with value stop1 and the other stop2. Let me know if this works for now 🤞
@Jacob Kofoed
It should work for everything, yes 👍 It seems like classes are not copy/pasted automatically. I will check with the team if we can fix that as well. For now you just need to add class in the attribute panel on the two <stop> elements. One with value stop1 and the other stop2. Let me know if this works for now 🤞
lululucaschae
1 year ago
Oh right, there's where it went wrong. Thanks for the support Jacob, working nicely now 🙂

Implementing complex svg's?

lululucaschae

Jacob Kofoed

Jacob Kofoed

lululucaschae

Jacob Kofoed

lululucaschae

Jacob Kofoed

lululucaschae