How to add SVG <text> in Blazor/razor file

Viewed 934

I have a Blazor app (.Net 3.1 Core) that generate an SVG image. It is generated like any other HTML using razor/Blazor syntax. The problem is when generating SVG <text> elements. I have tried

<text x="0">Some text</text>

and this results in invalid syntax since is special in razor files. I have also tried

@:<text x="0">Some text</text>

which is accepted by razor, but this results in tags getting removed and attributes rendered as normal text instead of SVG tags.

How do I write an SVG <text> element in razor syntax? I don't want to revert to C# and HtmlString etc.

Update: Missing key point here was that I used it inside a @foreach, which I first didn't think was relevant.

1 Answers

Wrapping the SVG <text> in a razor <text> like below works, but it ain't pretty or intuitive :)

<text>
<text x="0">Some text</text>
</text>

I'm not sure why @: didn't work as I understood it @:stuff and <text>stuff</text> should be equivalent.

Related