1

I'm using blazor to generate SVG items on a page. This works great except when I am trying to create a <clipPath> tag. Blazor is case-changing it to <clippath> which is not an accepted SVG tag and therefore does nothing.

Is there a way to get Blazor to keep the case of my tags intact?

Edit: Sample Code

<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>
8
  • I don't think the case is the problem...
    – enet
    Jan 8, 2019 at 23:07
  • @Issac yes this is the problem. I have tested this. If you use some sort of editor like codepen or jsfiddle or even notepad and purposefully enter <clippath> when they generate the code it will auto correct it to <clipPath>. However, Blazor is doing the opposite for me. So if you use the inspector to change you <clipPath> to <clippath> you will notice that it no longer works. This is why I need to get Blazor to leave it as <clipPath>
    – Joe Higley
    Jan 9, 2019 at 0:12
  • please do this: 1. Go to developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath 2. Click on the button "Open in CodePen" to see a relevant sample. Now change clipPath to clippath and see whether the sample still works or not...
    – enet
    Jan 9, 2019 at 0:36
  • @Issac As I said before, if you edit "clipPath" to "clippath" in codepen, the browser figures it out for you and corrects it back to "clipPath". You can confirm this by opening the inspector after making the change and seeing that it is still "clipPath". But Blazor is actually taking my "clipPath" and changing it to "clippath" and the browser is not correcting it back. Take the sample code I just added and add it to a Blazor component in a Blazor app and you will see what I mean. Then take it and plug it into codepen so you can see the difference.
    – Joe Higley
    Jan 9, 2019 at 0:56
  • @JoeHigley I suspect Blazor is therefore creating elements in the HTML namespace rather than the SVG namespace. Jan 9, 2019 at 1:04

1 Answer 1

2

So I reported this on the .Net github and it is now a confirmed bug. It also looks like they've prioritized the fix to be part of the .Net Core 3.0 milestone. Here's a link to the issue for anyone else who wants to follow it.

https://github.com/aspnet/AspNetCore/issues/6507

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.