路径内的SVG弯曲文字

Question

Hello guys I created a circle with 5 segments with SVG, im trying to add text inside the segments but I can't get it to work right.

This is what Im trying to do Text curved and centered inside the path

this is what im getting: enter image description here

This is my code so far, any 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">
            We go up, then we go down, then up 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>

Answer 1

You are currently using one of the circle segment paths as the path for your 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"> We go up, then we go down, then up 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 you that path is not appropriate. You need to add a new, simpler, path that goes from the left of a segment to the right of the segment. You'll need to do that for each segment.

Alternatively, you can use a path that forms an entire circle, then re-use that path for each segment. But specifying a different startOffset attribute for each, corresponding to their positions around the circle.

In the following example, I create a circular path with a radius of 40.

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

Then I use this same path for each segment. To make centering the text in each segment easy, I use the attribute text-anchor="middle" which will result in the text being centred on the startOffset we specify.

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

So, for the first segment we want the text to be centred at a point halfway in, so we use startOffset="10%" . For subsequent segments, we would use "30%", "50%" etc.

In the example below, I've done the first three segments. I'll leave the last two for you to finish.

To learn more about how <textPath> works, read the relevant section of the SVG specification .

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

 <svg viewBox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);"> <defs> <!-- Circular path with a 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 This </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 This </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>