Why is <textpath> not showing up? - svg

Question

Expected behavior:
I'm trying to write ABC in polygon with the help of but nothing is showing up. Is this the right way to do?
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
<g id="ABC" transform="translate(-8.000000, -2.000000)">
<g transform="translate(11.000000, 5.000000)">
<text x="10" y="100" style={{ fill: '#64FFDA' }}>
<textPath href="#Shape" fill="#64FFDA">
ABC
</textPath>
</text>
<polygon
id="Shape"
stroke="#64FFDA"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
fillOpacity="transparent"
points="39 0 0 22 0 67 39 90 78 68 78 23"></polygon>
</g>
</g>
</svg>

Answer 1

If you need to place letters inside the polygon, you need to place the <text> command below the <polygon> command
Pay attention to the syntax of SVG command writing. Instead of strokeWidth ="5" you need stroke-width ="5"
<svg xmlns="http://www.w3.org/2000/svg" role="img" width="20%" height="20%" viewBox="0 0 84 96">
<g id="ABC" transform="translate(-8.000000, -2.000000)">
<g transform="translate(11.000000, 5.000000)">
<polygon
id="Shape"
stroke="#64FFDA"
stroke-width="4"
fill="#151515"
points="39 0 0 22 0 67 39 90 78 68 78 23"></polygon>
</g>
<text x="50" y="55" font-size="22px" font-weight="500" font-family="sans-serif" fill="#64FFDA" text-anchor="middle" >ABC</text>
</g>
</svg>