'SVG add text along the circle arc

I'm trying to draw SVG radial pie chart as mentioned in here: colour chart.

Now I'm trying to add text to each slice along with the arc.

I'm trying to show Text 1 with exact same x, y coordinates with M and A values. But even it does not show.

EG : for slice

<path d="M 0 ,-70 A 70,70 0 0,1 49.497, -49.497" stroke="url(#wheelsegOuter11)" />

and for text

<path d="M 0 ,-70 A 70,70 0 0,1 49.497, -49.497" id="wheelsegOuterTextABC2" />

but nothing works. What i'm missing in here

<svg width="670" height="670" viewBox="-10 -10 220 220" class="pie-chart" id="xyz" style="border:1px solid black;">
    <linearGradient id="wheelsegOuter01" x1="0" y1="-83" x2="83" y2="0">
      <stop offset="0%" stop-color="#ff5e53" />
      <stop offset="100%" stop-color="#ff5e53" />
    </linearGradient>
    <linearGradient id="wheelsegOuter02" x1="83" y1="0" x2="0" y2="83">
      <stop offset="0%" stop-color="#46c6b4" />
      <stop offset="100%" stop-color="#46c6b4" />
    </linearGradient>
    <linearGradient id="wheelsegOuter03" x1="0" y1="83" x2="-83" y2="0">
      <stop offset="0%" stop-color="#055295" />
      <stop offset="100%" stop-color="#055295" />
    </linearGradient>
    <linearGradient id="wheelsegOuter04" x1="-83" y1="0" x2="0" y2="-83">
      <stop offset="0%" stop-color="#fde152" />
      <stop offset="100%" stop-color="#fde152" />
    </linearGradient>
    <linearGradient id="wheelsegOuter11" x1="0" y1="-70" x2="49.497" y2="-49.497">
      <stop offset="0%" stop-color="#d3e0d6" />
      <stop offset="100%" stop-color="#d3e0d6" />
    </linearGradient>
    <linearGradient id="wheelsegOuter12" x1="49.497" y1="-49.497" x2="70" y2="0">
      <stop offset="0%" stop-color="#efefef" />
      <stop offset="100%" stop-color="#efefef" />
    </linearGradient>

    <path d="M 155.154 85.154 L 210.309 116.974 " id="wheelsegOuterTextABC1" />     
    <path d="M 49.497 ,-49.497 A 70,70 0 0,1 49.497, -49.497" id="wheelsegOuterTextABC2" />
  </defs>
  <Foo xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" />
  <g id="pathOuterList0" transform="translate(100,100)" stroke-width="10" fill="none">
    <path d="M 0 ,-83 A 83,83 0 0,1 83, 0" stroke="url(#wheelsegOuter01)" />
    <path d="M 83 ,0 A 83,83 0 0,1 0, 83" stroke="url(#wheelsegOuter02)" />
    <path d="M 0 ,83 A 83,83 0 0,1 -83, 0" stroke="url(#wheelsegOuter03)" />
    <path d="M -83 ,0 A 83,83 0 0,1 0, -83" stroke="url(#wheelsegOuter04)" />
  </g>
  <g id="pathOuterList1" transform="translate(100,100)" stroke-width="10" fill="none">
    <path d="M 0 ,-70 A 70,70 0 0,1 49.497, -49.497" stroke="url(#wheelsegOuter11)" />  
    <text font-size="12" >
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wheelsegOuterTextABC2">text 1</textPath>
    </text>
    <path d="M 49.497 ,-49.497 A 70,70 0 0,1 70, 0" stroke="url(#wheelsegOuter12)" />
    <path d="M 70 ,0 A 70,70 0 0,1 49.497, 49.497" stroke="url(#wheelsegOuter11)" />
    <path d="M 49.497 ,49.497 A 70,70 0 0,1 0, 70" stroke="url(#wheelsegOuter12)" />
    <path d="M 0 ,70 A 70,70 0 0,1 -49.497, 49.497" stroke="url(#wheelsegOuter11)" />
    <path d="M -49.497 ,49.497 A 70,70 0 0,1 -70, 0" stroke="url(#wheelsegOuter12)" />
    <path d="M -70 ,0 A 70,70 0 0,1 -49.497, -49.497" stroke="url(#wheelsegOuter11)" />
    <path d="M -49.497 ,-49.497 A 70,70 0 0,1 0, -70" stroke="url(#wheelsegOuter12)" />
  </g>
 
  <text font-size="12">
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wheelsegOuterTextABC1">text 2</textPath>
  </text>
</svg>

My ultimate goal is to draw something like this

Solution 1:^[1]

Able to resolve this problem. Issue is with view box and transform values. A simple pie chart in SVG and A designer’s adventure in maths and SVG helps me to understand missing concept of mine

<svg width="670" height="670" viewBox="-100 -100 200 200" class="pie-chart" id="xyz" style="border:1px solid black;">
    <linearGradient id="wheelsegOuter01" x1="0" y1="-83" x2="83" y2="0">
      <stop offset="0%" stop-color="#ff5e53" />
      <stop offset="100%" stop-color="#ff5e53" />
    </linearGradient>
    <linearGradient id="wheelsegOuter02" x1="83" y1="0" x2="0" y2="83">
      <stop offset="0%" stop-color="#46c6b4" />
      <stop offset="100%" stop-color="#46c6b4" />
    </linearGradient>
    <linearGradient id="wheelsegOuter03" x1="0" y1="83" x2="-83" y2="0">
      <stop offset="0%" stop-color="#055295" />
      <stop offset="100%" stop-color="#055295" />
    </linearGradient>
    <linearGradient id="wheelsegOuter04" x1="-83" y1="0" x2="0" y2="-83">
      <stop offset="0%" stop-color="#fde152" />
      <stop offset="100%" stop-color="#fde152" />
    </linearGradient>
    <linearGradient id="wheelsegOuter11" x1="0" y1="-70" x2="49.497" y2="-49.497">
      <stop offset="0%" stop-color="#d3e0d6" />
      <stop offset="100%" stop-color="#d3e0d6" />
    </linearGradient>
    <linearGradient id="wheelsegOuter12" x1="49.497" y1="-49.497" x2="70" y2="0">
      <stop offset="0%" stop-color="#efefef" />
      <stop offset="100%" stop-color="#efefef" />
    </linearGradient>

    
    <path d="M 0 ,-70 A 70,70 0 0,1 49.497, -49.497" id="wheelsegOuterTextABC2" />
    <path d="M 49.497 ,-49.497 A 70,70 0 0,1 70, 0" id="wheelsegOuterTextABC01" />
    <path d="M 70 ,0 A 70,70 0 0,1 49.497, 49.497" id="wheelsegOuterTextABC03" />
    
  </defs>
  <Foo xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" />
  <g id="pathOuterList0" stroke-width="10" fill="none">
    <path d="M 0 ,-83 A 83,83 0 0,1 83, 0" stroke="url(#wheelsegOuter01)" />
    <path d="M 83 ,0 A 83,83 0 0,1 0, 83" stroke="url(#wheelsegOuter02)" />
    <path d="M 0 ,83 A 83,83 0 0,1 -83, 0" stroke="url(#wheelsegOuter03)" />
    <path d="M -83 ,0 A 83,83 0 0,1 0, -83" stroke="url(#wheelsegOuter04)" />
  </g>
  <g id="pathOuterList1" stroke-width="10" fill="none">
    <path d="M 0 ,-70 A 70,70 0 0,1 49.497, -49.497" stroke="url(#wheelsegOuter11)" />  
    <path d="M 49.497 ,-49.497 A 70,70 0 0,1 70, 0" stroke="url(#wheelsegOuter12)" />
    <path d="M 70 ,0 A 70,70 0 0,1 49.497, 49.497" stroke="url(#wheelsegOuter11)" />
    <path d="M 49.497 ,49.497 A 70,70 0 0,1 0, 70" stroke="url(#wheelsegOuter12)" />
    <path d="M 0 ,70 A 70,70 0 0,1 -49.497, 49.497" stroke="url(#wheelsegOuter11)" />
    <path d="M -49.497 ,49.497 A 70,70 0 0,1 -70, 0" stroke="url(#wheelsegOuter12)" />
    <path d="M -70 ,0 A 70,70 0 0,1 -49.497, -49.497" stroke="url(#wheelsegOuter11)" />
    <path d="M -49.497 ,-49.497 A 70,70 0 0,1 0, -70" stroke="url(#wheelsegOuter12)" />
  </g>
  
  
  <text font-size="12" >
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wheelsegOuterTextABC01">text 2</textPath>
  </text>
  <text font-size="12">
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wheelsegOuterTextABC2">text 3</textPath>
  </text>
   <text font-size="12" >
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wheelsegOuterTextABC03">text 1</textPath>
  </text>
   <text font-size="12" >
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wheelsegOuterTextABC04">text 4</textPath>
  </text>
</svg>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	DevT

'SVG add text along the circle arc

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]