I have been wrapping text around a circle SVG circle, but when i assign the text to a C# property it wont show.

The following code works without any issue -

        <svg>
            <path id="circle" d="m96.06557,140.16394c-27.62431,0 -50,-22.37569 -50,-50c0,-27.62431 22.37569,-50 50,-50c27.62431,0 48.85246,22.37569 48.85246,50c0,27.62431 -21.22815,50 -48.85246,50z" />
            <text transform="rotate(155 95.4918 90.1639)">
                <textPath xlink:href="#circle">
                    EXPECTED RESULT 
                </textPath>
            </text>
        </svg>

This is the result of the code above

But when change the "EXPECTED RESULT" text to a C# property (@text)...

         <svg>
            <path id="circle" d="m96.06557,140.16394c-27.62431,0 -50,-22.37569 -50,-50c0,-27.62431 22.37569,-50 50,-50c27.62431,0 48.85246,22.37569 48.85246,50c0,27.62431 -21.22815,50 -48.85246,50z" />
            <text transform="rotate(155 95.4918 90.1639)">
                <textPath xlink:href="#circle">
                    @text
                </textPath>
            </text>
        </svg>

I get no text at all

Code example - https://blazorfiddle.com/s/7at03xjw

So to summarize my question - how do i assign a C# object to a SVG path in a .razor file?

CodePudding user response：

The issue is with using xlink:href. Change it to href and you'll be golden.

Refer to the Mozilla documentation regarding deprecation: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

BlazorFiddle: https://blazorfiddle.com/s/9smd12u2