SVG tags are case-sensitive, but yew lowercases them

[OneSadCookie]

Problem
SVG tags are case-sensitive, but yew lowercases them.

My particular issue is with clipPath - this is defined as an element with an id, then referred to from CSS with a # url back to the element. On FireFox at least, if the clipPath node is instead clippath, the reference can't be resolved.

Whatever I type in the html! macro, svg clipPath elements are created as clippath, and therefore cannot be referred to.

This issue is alluded to in the comments of #1269 , and might affect the resolution of that issue.

Steps To Reproduce
Replace the default rendering in the basic template with the following:

            html! {
                <svg width=50 height=50>
                    <defs>
                        <clipPath id="clipPath">
                            <rect x="15" y="15" width="40" height="40" />
                        </clipPath>
                    </defs>

                    <circle cx=25 cy=25 r=20
                        style="fill: #0000ff; clip-path: url(#clipPath);"
                    />
                </svg>
            }

Expected behavior
You should see a blue circle clipped by a rectangle (example from https://jenkov.com/tutorials/svg/clip-path.html & screenshot there). With yew in FireFox, you'll see nothing. You can comment the style= line to see the unclipped circle.

Environment:

• Yew 0.19.3
• FireFox 97.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

[OneSadCookie]

For the moment it seems I can work around it by creating the clipPath with a "dynamic tag":

<@{"clipPath"} ...>...</@>

[adrianromero]

Dynamic tags do not work in my case. I have installed Yew 0.19.3

<@{"clipPath"} ...>...</@>

Renders as:

<clippath ...>...</clippath>

Expected:

<clipPath ...>...</clipPath>

[WorldSEnder]

As mentioned in #1269, if you manually create a tag with VTag::new, the tag name will not be "normalized". For the other case, I'm in the process or coming up with a PR.

[WorldSEnder]

Dynamic tags should now work. If you compile with nightly, a lint is added that reminds you that literal tags are "normalized" to lowercase and to use dynamic tags, i.e. <@{"clipPath"}>. Maybe at some point in the future this won't be necessary, but for the short-term this will remain.