Upside-down text in SVG textpath - svg

Question

I am trying to design a logo with some text around a circle and I can't get the text to be correctly oriented. I am using plain SVG written by hand without JS. Would you know how to solve this? Here what I have so far:
.full {
fill:none;
stroke:#000000;
stroke-width:0.6px;
}
.letters {
font-size: 4px;
text-align: center;
}
.letters textPath {
/*dominant-baseline: middle;*/
text-anchor: middle;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 30" width="150mm" height="150mm">
<g transform="translate(+0,+25) scale(+1,-1)">
<g transform="translate(+05,+05)">
<path class="full" d="M17.696252,2.152991 A 11 11 0 0 0 -3.554116,2.152991" />
<path class="full" d="M-1.355421,12.070664 A 11 11 0 0 0 3.308846,15.336619" />
<path class="full" d="M12.571068,14.526279 A 11 11 0 0 0 16.597347,10.500000" />
<path id="txt1" fill="none" d="M-3.554116,2.152991 A 11 11 0 0 0 -1.355421,12.070664" />
<path id="txt2" fill="none" d="M3.308846,15.336619 A 11 11 0 0 0 12.571068,14.526279" />
<path id="txt3" fill="none" d="M16.597347,10.500000 A 11 11 0 0 0 17.696252,2.152991" />
<text class="letters"><textPath xlink:href="#txt1" startOffset="50%">txt1</textPath></text>
<text class="letters"><textPath xlink:href="#txt2" startOffset="50%">txt2</textPath></text>
<text class="letters"><textPath xlink:href="#txt3" startOffset="50%">txt3</textPath></text>
</g>
</g>
</svg>

Answer 1

transform="scale(+1,-1)" causes vertical flip below of its descendants; you'll have to either omit that or negate this by adding extra transform="scale(+1,-1)" to each text node and its path.

Answer 2

I faced the same question as Rufus. I had to draw a circle made of different slices and the slices had text on them. I didn't found a solution on the internet, so i had to figure out a way to accomplish this. I did it this way.
The first question was how to draw the slices. I found the excellent work of Daniel Pataki on this matter (https://danielpataki.com/svg-pie-chart-javascript/). I calculated the values as described in the page, for a slices with an angle of 30 degrees. I used the <g> tag to rotate the slices together with the text.
Then I rotated the (with the slices and the text) 12 times (12 x 30 = 360):
<circle cx="350" cy="350" r="300" fill="transparent" />
<? $t = 1; for($t == 1; $t <= 12; $t++) {
$transform = ($t > 1) ? "transform='rotate(" . ($t-1) * 30 . ", 350, 350)'" : "";
$fillcolor = "#912184";
?>
<g <?echo $transform ?> >
<path fill="<?echo $fillcolor ?>" d="M350,350 L350,50 A350,350 1 0,1 500, 90.19238 z"></path>
<text style="font-family: 'Roboto', sans-serif; font-size: 22px" x="350" y="350" fill="#fff" dx="130" transform="rotate(-73, 350, 350)"><?echo $captions[$t-1] ?></text>
</g>
<? } ?>
Now I have 12 same-sized slices filling up the circle. The text (from some array $captions) is placed in the slices, but on the left half of the circle, up-side-down. That's not very readable. I tried to rotate in different ways, but without success. But what did the trick for me, was a) change the rotation angle and b) shift the text more along the path using the dx parameter only for the texts on the left side of the circle (i.e $t > 6):
<circle cx="350" cy="350" r="340" fill="#FA864D" />
<circle cx="350" cy="350" r="300" fill="transparent" />
<? $t = 1; for($t == 1; $t <= 12; $t++) {
$transform = ($t > 1) ? "transform='rotate(" . ($t-1) * 30 . ", 350, 350)'" : "";
$fillcolor = '#912184';}
?>
<g <?echo $transform ?> >
<path fill="<?echo $fillcolor ?>" d="M350,350 L350,50 A350,350 1 0,1 500, 90.19238 z"></path>
<? if ($t <= 6) { ?>
<text style="font-family: 'Roboto', sans-serif; font-size: 22px" x="350" y="350" fill="#fff" dx="130" transform="rotate(-73, 350, 350)"><?echo $captions[$t-1] ?></text>
<? } else { ?>
// combination of shift and rotation changed only for the left half of the circle did the trick
<text style="text-anchor: start; font-family: 'Roboto', sans-serif; font-size: 22px" x="350" y="350" fill="#fff" dx="-250" transform="rotate(103, 350, 350)"><?echo $captions[$t-1] ?></text>
<? } ?>
</g>
<? } ?>
Now it looks good and the text is readable. If you wish, you can change the text-anchor parameter, to position the text in the slices to your demand. I hope this will help others too.
Regards,

Answer 3

I had a similar issue, I found that swapping the positions of the x,y and x1,y1 parameters in the path element fixed it. The order that these were listed in in the path element effected the orientation of the text (at least in my case).