Blazor casts cases of SVG objects

[higles]

Describe the bug

I noticed this issue when working with clipPath on SVG elements. Blazor will automatically take the clipPath tag and cast it to all lower-case which doesn't work. I assume that it has some logic for taking all DOM tags and converting them to lowercase, which makes sense in most cases but this one is definitely case sensitive.

To Reproduce

1. Take the following code snippet and place as the html for a component.

<svg width="200" height="200">
  <g clip-path="url(#myClip)">
    <rect width="200" height="200" fill="red"></rect>
    <clipPath id="myClip">
      <circle cx="100" cy="100" r="100" fill="none"></circle>
    </clipPath>
  </g>
</svg>

2. Run the application
3. Open the inspector and you will notice that "clipPath" has been replaced with "clippath"

Expected behavior

The desired result is to see a circular clipping of the red rectangle on the screen but you will see the full red rectangle instead.

Additional context

.Net Core version 2.1.502
Blazor version 0.7.0

[Andrzej-W]

@higles Where is the code snippet?

[higles]

@Andrzej-W sorry, didn't mark it as code, so it wasn't showing up. Should be there now.

[mkArtakMSFT]

Closing as we will be tackling this as part of #18271