SVG pie chart Text labels not showing using just css html and svg (no chart js or other)

Question

I can see "Project" my text in the editor window but cannot get it to show on the graph or in the pie wedge area. Any help would be greatly appreciated. I need the label text aligned to the right or to show on top. I stacked other images on top of the graph so I tried a z-index to do it. Here is my code.

/* SHOW LABEL ON HOVER */
jQuery(".group_path").hover(
  function() {
    jQuery(this).find(".text_toggle").css("display", "block");
  },
  function() {
    jQuery(this).find(".text_toggle").css("display", "none");
  }
);

/* Trying to get text to show as labels - also Jquery code in script file */

.text_toggle {
  display: none;
  fill: transparent;
}

.group_path:hover .text_toggle {
  display: block;
  font-size: 1em;
  text-align: right;
  z-index: 5;
}

<!-- Jquery 3.6 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


<!-- Body -->
<svg viewBox='-1 -1 2 2' style='transform: scale(1.0);  rotate(-90deg)'>
  <g id="4" >
    <g id="4.01" class="group_path" fill='rgb(84,161,229)'  >
      <path stroke='white' stroke-width='.0125px' d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 '></path>
      <text class="text_toggle" d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 '  ><tspan >Project</tspan></text>
    </g>
    <g id="4.02" class="group_path" fill='rgb(242,162,84)'>
      <path  stroke='white' stroke-width='.0125px' d='M 0.873262 0.487250 A 1 1 0 0 1 -0.147119 0.989119 L 0 0 '></path>
    </g>
    <g id="4.03" class="group_path" fill='rgb(237,110,133)' >
      <path stroke='white' stroke-width='.0125px' d='M -0.147119 0.989119 A 1 1 0 0 1 -0.689114 0.724653 L 0 0 '></path>
    </g>
    <g id="4.04" class="group_path" fill='rgb(173,205,225)' >
      <path stroke='white' stroke-width='.0125px' d='M -0.689114 0.724653 A 1 1 0 0 1 -0.915241 0.402907 L 0 0 '></path>
    </g>
    <g id="4.05" class="group_path" fill='rgb(187,221,147)' >
      <path stroke='white' stroke-width='.0125px' d='M -0.915241 0.402907 A 1 1 0 0 1 -0.946085 0.323917 L 0 0 '></path>
    </g>
    <g id="4.06" class="group_path" fill='rgb(238,158,155)' >
      <path stroke='white' stroke-width='.0125px' d='M -0.946085 0.323917 A 1 1 0 0 1 -0.978581 -0.205863 L 0 0 '></path>
    </g>
    <g id="4.07" class="group_path" fill='rgb(84,161,229)' >
      <path stroke='white' stroke-width='.0125px' d='M -0.978581 -0.205863 A 1 1 0 0 1 -0.879316 -0.476238 L 0 0 '></path>
    </g>
    <g id="4.08" class="group_path" fill='rgb(108,190,191)'>
      <path stroke='white' stroke-width='.0125px' d='M -0.879316 -0.476238 A 1 1 0 0 1 -0.527846 -0.849340 L 0 0 '></path>
    </g>
    <g id="4.09" class="group_path" fill='rgb(242,162,84)' >
      <path stroke='white' stroke-width='.0125px' d='M -0.527846 -0.849340 A 1 1 0 0 1 0.056518 -0.998402 L 0 0 '></path>
    </g>
    <g id="4.10" class="group_path" fill='rgb(237,110,133)'>
      <path stroke='white' stroke-width='.0125px' d='M 0.056518 -0.998402 A 1 1 0 0 1 0.543760 -0.839241 L 0 0 '></path>
    </g>
    <g id="4.11" class="group_path" fill='rgb(173,205,225)'>
      <path stroke='white' stroke-width='.0125px' d='M 0.543760 -0.839241 A 1 1 0 0 1 0.711535 -0.702650 L 0 0 '></path>
    </g>
    <g id="4.12" class="group_path" fill='rgb(187,221,147)'>
      <path stroke='white' stroke-width='.0125px' d='M 0.711535 -0.702650 A 1 1 0 0 1 0.724653 -0.689114 L 0 0 '></path>
    </g>
    <g id="4.13" class="group_path" fill='rgb(42,228,229)'>
      <path stroke='white' stroke-width='.00625px' d='M 0.724653 -0.689114 A 1 1 0 0 1 1.000000 -0.000000 L 0 0 '></path>
    </g>                      
    <circle fill='#fff' cx='0' cy='0' r='0.80'/>
    </g>
</svg>

I don't want to use jquery if I can avoid it