yewstack/yew

SVG issue with lineargradient.

toastxc opened this issue · 4 comments

toastxc commented

Problem

Steps To Reproduce
Steps to reproduce the behavior:

git clone https://github.com/toastxc/yew-svg
cd yew-svg/
trunk serve

Expected behavior
An SVG rectangle should appear on the screen.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment:

  • Yew version: 0.21.0
  • Rust version: rustc 1.78.0
  • Build tool: trunk
  • OS: Ubuntu
  • Browser and version: Mozilla Firefox 126.0.1

Questionnaire

  • I'm interested in fixing this myself but don't know where to start
  • I would like to fix and I have a solution
  • I don't have time to fix this right now, but maybe later
toastxc commented

This SVG issue is strange, as the exact same code works fine in a normal HTML file.
My apologizes if this is a duplicate issue.

toastxc commented

Ok I found a solution by digging around issues, <@{"linearGradient"} to be precise.
Y'all should really document or fix this problem...

vpochapuis commented

Ok I found a solution by digging around issues, <@{"linearGradient"} to be precise. Y'all should really document or fix this problem...

Hey~
I stumbled on the same issue recently, and as mentioned its related to #2483

It seems that it has been documented in the macro introduction: #2703

You can see it here in the official documentation at the 4. https://yew.rs/docs/concepts/html:
image

WorldSEnder commented

Yes thank you for mentioning it again vpochapuis. For any surprised readers, to the best of my knowledge the original intention was to use rust snaking for these kind of names instead of camel case (so my_tag instead of myTag) so that we could more easily add modules for different kinds of well known tags. The exact details are a bit shrouded in history.

I would think a PR that only applies this "casing fix" to well known tags, i.e. things that we know should be lowercased and leaves unknown tags alone would be welcome as long as it has a bit of explanation how it doesn't break existing code and adjusts the nightly lint.