I got a problem with circled text related to SVG. My goal is to create path that will allow me to write on it but also center the text, still keeping track with my path - from the top part of the circle.

Example

That's what it looks like (image inside)

Problem

Currently I'm using textPath + path combination to generate path and write on it.

<svg>
  <defs>
    <path id="textPath" d="M 200 175 A 25 25 0 0 0 182.322 217.678" />
  </defs>
  <text x="25" y="0">
    <textPath xlink:href="#textPath" startOffset="0" >here goes my text</textPath>
  </text>
</svg>

I also tried Raphael library to manage it work, but seriously I can't do what I want. Is here somebody who actually managed to make it work? Or is there any way to make it so?

I got a problem with circled text related to SVG. My goal is to create path that will allow me to write on it but also center the text, still keeping track with my path - from the top part of the circle.

Example

That's what it looks like (image inside)

Problem

Currently I'm using textPath + path combination to generate path and write on it.

<svg>
  <defs>
    <path id="textPath" d="M 200 175 A 25 25 0 0 0 182.322 217.678" />
  </defs>
  <text x="25" y="0">
    <textPath xlink:href="#textPath" startOffset="0" >here goes my text</textPath>
  </text>
</svg>

I also tried Raphael library to manage it work, but seriously I can't do what I want. Is here somebody who actually managed to make it work? Or is there any way to make it so?

• javascript
• svg
• raphael
• geometry

• Your example link (That's what it looks like) is broken. – Mahozad Commented May 6, 2022 at 9:10
• Side note: With SVG 2 (implementation in progress) you can define whether the text is rendered inward or outward with the new side attribute on the textPath element. – Mahozad Commented May 6, 2022 at 9:17

1 Answer 1

define your text path as the complete upper hemisphere of the elliptical arc you want to draw on:

<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500" />

and set the startOffset of your textPath to 50%. note that your svg file is not well-formed as it is lacking the namespace definition for xlink. the following is a working standalone example:

<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xhtml="http://www.w3.org/1999/xhtml"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="20cm" height="20cm"
   viewBox="0 0 1000 1000"
   preserveAspectRatio="xMinYMin"
   style="background-color:white; border: solid 1px black;"
>
<defs>
<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500"/>
</defs>
<text x="0" y="0" text-anchor="middle" style="font-size:30pt;"><textPath xlink:href="#textPath" startOffset="50%" >here goes my text</textPath></text>
</svg>

re: comment on a solution for going all teh way around the circle: the gist is to define the text path to extend along the whole circumference, like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xhtml="http://www.w3.org/1999/xhtml"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="20cm" height="20cm"
   viewBox="0 0 1000 1000"
   preserveAspectRatio="xMinYMin"
   style="background-color:white; border: solid 1px black;"
>
<defs>
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"/>
</defs>
<text x="0" y="0" text-anchor="middle" style="font-size:30pt;"><textPath xlink:href="#textPath" startOffset="50%" >this is a merry-go-round of all my text wrapped around a circle, a vbery big one</textPath></text>
</svg>