html - SVG curved text inside path -

hello guys created circle 5 segments svg, im trying add text inside segments can't work right.

this im trying text curved , centered inside path

this im getting: enter image description here

this code far, suggestions?

<svg  viewbox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);">    <a xlink:href="">       <path  class="frag logoa" id="f1" data-link="1" d='m55,55 l14.54915028125263,25.61073738537635 a50,50 0 0,1 70.45084971874736,7.447174185242318z' >       </path>       <text font-family="verdana" font-size="15" stroke="red";>          <textpath xlink:href="#f1">             go up, go down, again          </textpath>       </text>    </a>    <a xlink:href="" >       <path class="frag logoa" data-link="2" d='m55,55 l70.45084971874736,7.447174185242318 a50,50 0 0,1 105,54.999999999999986z' ></path>    </a>    <a xlink:href="" >       <path class="frag logoa" data-link="3" d='m55,55 l105,55 a50,50 0 0,1 70.45084971874738,102.55282581475768z'></path>    </a>    <a xlink:href=""  >       <path class="frag logoa" data-link="4" d='m55,55 l70.45084971874738,102.55282581475768 a50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path>    </a>    <a xlink:href=""   >       <path class="frag logoa" data-link="5" d='m55,55 l14.549150281252636,84.38926261462366 a50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path>    </a>    <circle class="cente" cx='55' cy='55' r='35' ></circle>    <circle class="minicirculo" cx='55' cy='55' r='15' ></circle> </svg> 

you using 1 of circle segment paths path text. see below.

path, circle {    fill: transparent;    stroke: black;  }

<svg  viewbox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);">     <a xlink:href="">        <path  class="frag logoa" id="f1" data-link="1" d='m55,55 l14.54915028125263,25.61073738537635 a50,50 0 0,1 70.45084971874736,7.447174185242318z' >        </path>        <text font-family="verdana" font-size="4" fill="red";>           <textpath xlink:href="#f1">              go up, go down, again           </textpath>        </text>     </a>     <a xlink:href="" >        <path class="frag logoa" data-link="2" d='m55,55 l70.45084971874736,7.447174185242318 a50,50 0 0,1 105,54.999999999999986z' ></path>     </a>     <a xlink:href="" >        <path class="frag logoa" data-link="3" d='m55,55 l105,55 a50,50 0 0,1 70.45084971874738,102.55282581475768z'></path>     </a>     <a xlink:href=""  >        <path class="frag logoa" data-link="4" d='m55,55 l70.45084971874738,102.55282581475768 a50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path>     </a>     <a xlink:href=""   >        <path class="frag logoa" data-link="5" d='m55,55 l14.549150281252636,84.38926261462366 a50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path>     </a>     <circle class="cente" cx='55' cy='55' r='35' ></circle>     <circle class="minicirculo" cx='55' cy='55' r='15' ></circle>  </svg>

obviously path not appropriate. need add new, simpler, path goes left of segment right of segment. you'll need each segment.

alternatively, can use path forms entire circle, re-use path each segment. specifying different startoffset attribute each, corresponding positions around circle.

in following example, create circular path radius of 40.

<path id="clockwise" d="m55,15 a40,40 0 0 1 55,95 a40,40 0 0 1 55,15"/> 

then use same path each segment. make centering text in each segment easy, use attribute text-anchor="middle" result in text being centred on startoffset specify.

we can use percentages specify how far around our circular path want text start. 0% start of path (also left side of first segment), 20% start of second segment, etc.

so, first segment want text centred @ point halfway in, use startoffset="10%". subsequent segments, use "30%", "50%" etc.

in example below, i've done first 3 segments. i'll leave last 2 finish.

to learn more how <textpath> works, read relevant section of svg specification.

path, circle {    fill: transparent;    stroke: black;  }

<svg viewbox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);">     <defs>       <!-- circular path radius of 40 -->       <path id="clockwise" d='m55,15 a40,40 0 0 1 55,95 a40,40 0 0 1 55,15'             transform="rotate(-54,55,55)"/>     </defs>     <a xlink:href="">        <path  class="frag logoa" id="f1" data-link="1" d='m55,55 l14.54915028125263,25.61073738537635 a50,50 0 0,1 70.45084971874736,7.447174185242318z' >        </path>        <text font-family="verdana" font-size="6" fill="red";>           <textpath xlink:href="#clockwise" startoffset="10%" text-anchor="middle">              cloud marina           </textpath>        </text>     </a>     <a xlink:href="" >        <path class="frag logoa" data-link="2" d='m55,55 l70.45084971874736,7.447174185242318 a50,50 0 0,1 105,54.999999999999986z' ></path>        <text font-family="verdana" font-size="6" fill="red";>           <textpath xlink:href="#clockwise" startoffset="30%" text-anchor="middle">              order           </textpath>        </text>     </a>     <a xlink:href="" >        <path class="frag logoa" data-link="3" d='m55,55 l105,55 a50,50 0 0,1 70.45084971874738,102.55282581475768z'></path>        <text font-family="verdana" font-size="6" fill="red";>           <textpath xlink:href="#clockwise" startoffset="50%" text-anchor="middle">              earn           </textpath>        </text>     </a>     <a xlink:href=""  >        <path class="frag logoa" data-link="4" d='m55,55 l70.45084971874738,102.55282581475768 a50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path>     </a>     <a xlink:href=""   >        <path class="frag logoa" data-link="5" d='m55,55 l14.549150281252636,84.38926261462366 a50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path>     </a>     <circle class="cente" cx='55' cy='55' r='35' ></circle>     <circle class="minicirculo" cx='55' cy='55' r='15' ></circle>  </svg>