<svg
   xmlns="http://www.w3.org/2000/svg" 
   width="100"
   height="100"
   version="1.1">
  <script>
    const setTextPath = (event) => {
      const el = event.target;
      const elType = el.tagName;

      const multiarcNumber = Number(el.id.split('_')[1]);
      if (multiarcNumber > 0) {
      document
        .getElementById('multiarcText')
        .setAttribute('href',
          '#multiarc_' + (multiarcNumber - 1));
        el.remove();
      } else {
        console.log('this is the last path to set text on');
      }
      console.log(event.target.textContent);
    }
  </script>
    <path 
      id="multiarc_0"
pointer-events="all"          onClick="setTextPath(event);"
      d="
        M 25, 50
        a 25,25 0 1,1 50,0
        a 25,25 0 1,1 -50,0
        " 
          fill="none">
      <desc>path is M (CX - R), CY
        a R,R 0 1,1 (R * 2),0
        a R,R 0 1,1 -(R * 2),0</desc>
      </path>
  
    <path 
      id="multiarc_1"
pointer-events="all"        onClick="setTextPath(event);"
      d="
      M 50, 50
      m -25, 0
      a 25,25 0 1,0 50,0
      a 25,25 0 1,0 -50,0
    " 
    fill="none"
          >
      <desc>path is M CX CY
      m -R, 0
      a R,R 0 1,0 (R * 2),0
      a R,R 0 1,0 -(R * 2),0</desc>
  </path>
  <path 
   id="multiarc_2"
   pointer-events="all"              onClick="setTextPath(event);"
     d="
        M 75, 50
        a 25,25 0 1,0 -50,0
        a 25,25 0 1,0 50,0
        " 
        fill="none">
      <desc>path is  M (CX + R), CY
        a R,R 0 1,0 -(R * 2),0
        a R,R 0 1,0 (R * 2),0</desc>
      </path>
   <path fill="none" 
    pointer-events="all"
 id="multiarc_3"       onClick="setTextPath(event);"
      d="
        M 50, 50
        a 25,25 0 1,0 -50,0
        a 25,25 0 1,0 50,0
        "
        transform="translate(25)"  >
      <desc>path is 
      M CX, CY 
      a R, R 0 1,0 -(R * 2), 0 
      a R, R 0 1,0 R * 2, 0 and
     uses translate function to move +R on X axis.</desc>
      </path>
  <path id="multiarc_4" onClick="setTextPath(event);"
    d="
     M 50, 50
     v-25
     a25,25 0 0,0 -25,25
     a25,25 0 0,0 25,25
     a25,25 0 0,0 25,-25    
     a25,25 0 0,0 -50,0" 
       fill="none"
       pointer-events="all"
        >
      <desc>This multi arc path will wrap differently between browser engines. 
    </desc>
  </path>
  <text dy="1" textLength="160">
    <textPath      
textLength="160"      
id="multiarcText" href="#multiarc_4" aria-label="Smashing">Smashing</textPath></text>
  
</svg>