Place text inside of the svg polygon

Question

I have a polygon with a shape of a triangle. But the text inside of the polygon is not rendering. Any help is appreciated. This is what I tried so far, and I am not able to figure out why the text isn't rendering. Can I actually place a text inside of a polygon with points like this?

 <svg xmlns="http://www.w3.org/2000/svg"  width="25" height="25" viewBox="0 0 64 64">
<polygon fill="#F3BC23" stroke="#F3BC23" stroke-width="1" points="30,4 4,60 60,60"/><polygon>
<text x="10" y="14" text-anchor="middle" fill="white" font-size="10"></text>

Thanks in advance.

Answer 1

There are a number of problems with your SVG.

1. The points attribute in the <polygon> wasn't formatted properly. It is missing commas.
2. You had a stray <polygon> tag at the end of that line.
3. You had no text in your <text> element.
4. The position of the text was not over the polygon. White text on a white background would be invisible.
5. I also increased the font-size so that the text was visible.

<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 64 64">
  <polygon fill="#F3BC23" stroke="#F3BC23" stroke-width="1" points="30,4,4,60,60,60"/>
  <text x="32" y="50" text-anchor="middle" fill="white" font-size="30">X</text>
</svg>