JSFiddle - React, Tailwind, and code Playground

HTML

<embed width="100" height="100" type="image/svg+xml">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <path id="textPath"
           d="M 0,-1
              C 0.5523, -1   1, -0.5523    1,0
              C 1, 0.5523    0.5523, 1     0,1
              C -0.5523, 1   -1, 0.5523    -1,0
              C -1, -0.5523  -0.5523, -1   0,-1"
          stroke="blue" stroke-width="0.01" fill="none" transform="translate(150,150) scale(100,100)"/>

      <text fill="black" font-size = "12" font-family = "arial">
      <textPath id = 'test' xlink:href="#textPath">Text on a Path ... Text on a Path</textPath>
    </text>  
  </svg>
</embed>

CSS

#textPath {
    border: 1px solid #ff0000;
}
#test {
    border: 1px solid #ff0000;
}

JavaScript

var temp = document.getElementById('textPath');
console.log(temp.innerHTML);