How can I get SVG text to align with the outer arc of a circle segment?

I'm trying to label a pie chart of sorts. I can't seem to get the text to follow the outer edge, inside the segment. All my attempts to modify alignment result in different variations of the text being jammed into the acute angle. The transforms on the text element should position the text with the related path.

What needs to happen here? I imagine I could create additional transparent paths just for this, but that seems unnecessary.

There's a similar question but I can't figure out how it's different from my scenario or what actually makes it work. The accepted answer is quite vague.

Some things I've looked into:

<svg class="ring-svg" width="100%" height="100%" viewBox="0 0 1000 1000">
  <g class="sector-g" transform="translate(500,500)">
    <path id="sectorPath_0" d="M 0 0 433.01270189221935 -249.99999999999997 A 500 500 0 0 0 3.061616997868383e-14 -500Z" fill="#e8ec77"></path>
     
    <text class="segment-label" x="500" y="0" style="transform: rotate(-60deg) translateX(-1.5rem) translateZ(0px);">
       <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sectorPath_0" text-anchor="middle">Label Text</textPath>
    </text>
  </g>
</svg>

Solution

If you want the text on the outside, you have to draw the arc in the opposite direction. Use startOffset in your textPath to position the label correctly - it's easier than trying to calculate the stacked transforms.

Although CSS units are supported - they're not supported consistently, so I would advise not to use things like rems, ems, pts, etc. inside an inline SVG.

<svg class="ring-svg" width="100%" height="100%" viewBox="0 0 1000 1000">
  <g class="sector-g" transform="translate(500,500)">
    <path id="sectorPath_0" d="M 0 0 L 0 -500 A 500 500 0 0 1 433 -250 Z" fill="#e8ec77"></path>
     
    <text class="segment-label" x="500" y="0" >
       <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sectorPath_0" text-anchor="middle" startOffset="17%">Label Text</textPath>
    </text>
  </g>
</svg>

Update:

Sorry - didn't twig that you wanted the label to be internal. In that case, just add a small transform to push the label inside.

<svg class="ring-svg" width="100%" height="100%" viewBox="0 0 1000 1000">
  <g class="sector-g" transform="translate(500,500)">
    <path id="sectorPath_0" d="M 0 0 L 0 -500 A 500 500 0 0 1 433 -250 Z" fill="#e8ec77"></path>
     <g transform="translate(-15,20)">
    <text class="segment-label" x="500" y="0" >
       <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sectorPath_0" text-anchor="middle" startOffset="17%">Label Text</textPath>
    </text>
    </g>
  </g>
</svg>