9

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?

2
  • Your example link (That's what it looks like) is broken.
    – Mahozad
    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
    May 6, 2022 at 9:17

1 Answer 1

21

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>
1
  • 1
    define your text path as the complete upper hemisphere of the elliptical arc you want to draw on: What if I need complete circle to write on? What then?
    – OldNurse
    Mar 19, 2013 at 10:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.