SVG curved text inside path

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?

Paul LeBeau · Accepted Answer

You are currently using one of the circle segment paths as the path for your text. See below.

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

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.

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 works, read the relevant section of the SVG specification.

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

SVG curved text inside path

Answers (1)

Related Questions