JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>SVG</title>
 </head>
 <body>
  <svg id="svgelem" height="150" width="400" xmlns="http://www.w3.org/2000/svg">
   <desc>
Text example
   </desc>
   <defs>
    <path id = "s3" d = "M 60 70 L 220 30 L 300 60 L 180 120 L 60 70" fill = "green" stroke = "black" stroke-width = "3"/>
   </defs>
   <g fill = "navy">
    <text font-size = "20">
     <textPath id="test" xlink:href = "#s3">
       Felix 123 lala foo bar FELIX 456 heja superkalifragelistigexpialigetisch
     </textPath>
    </text>
   </g>
  </svg>
  <br>
  <button id="bt_text" type="button">Change Text</button> 
  <br>
  <button id="bt_coord" type="button">Change Coordinates</button> 
 </body>
</html>

JavaScript

$("#bt_text").click(function(){
    $("#test").empty().append("other text allalaksddkfdsbbklas sldnsdd");});
$("#bt_coord").click(function(){
    $("path").attr("d","M 60 70 L 90 30 L 300 60 L 180 120 L 60 70");});