SVG Text on Circle - Change text orientation-CodePudding

I'm adding text along a circle path in an SVG. I managed to do it but I need to "flip" the upper texts.

"Sit amet" and "Dolor" need to be displayed straight like "Lorem" and "Ipsum". How to achieve this?

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#EFEFEF;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0"/>
<path id="textcircle" style="fill:#FAFAFA;" d="M56,256a200,200 0 1,0 400,0a200,200 0 1,0 -400,0"/>
<text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FFAD01;" dy="35" dx="90" >
        <textPath xlink:href="#textcircle">
            Lorem
        </textPath>
</text>
<text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FF7101;" dy="35" dx="420" >
        <textPath xlink:href="#textcircle">
            Ipsum
        </textPath>
</text>
 <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#B6957A;" dy="35" dx="760" >
        <textPath xlink:href="#textcircle">
            Dolor
        </textPath>
</text>
 <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#00B831;" dy="35" dx="1020" >
        <textPath xlink:href="#textcircle">
            Sit amet
        </textPath>
</text>
</svg>

CodePudding user response：

For this you will need to change the direction of the path. In this case I'm using a new path:

<path id="textcircle1" stroke="red" fill="none" d="M56,256a200,200 0 1,1 400,0" />

Please observe that I've changed the 5th parameter of the arc to 1.

your code: d="M56,256a200,200 0 1,0 400,0 ...
my code: d="M56,256a200,200 0 1,1 400,0"

Also I'm using only the first arc since the text will fall on thise one.

I've added a red stroke to this arc so that you can see it. You can remove the stroke attribute.

Yet another observation is that in order to place the text on yhe path at a certain point you can use the startOffset attribute.

I'm keeping your dy attribute but instead of using a dy I could have changed the radius of the circle from 200 to 210 (for example).

Also: please observe that I'm using a text-anchor="middle" attribute. In this case the rendered characters are aligned such that the middle of the text string is at the current text position. This is allowing me to set the position of the text preciselly, using startOffset="80%" and startOffset="20%" i.e at 20% of each end of the path. If you don't want to use the text-anchor="middle" you can remove it.

<svg viewBox="0 0 512 512">
  <path style="fill:#EFEFEF;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0" />
  <path id="textcircle" style="fill:#FAFAFA;" d="M56,256a200,200 0 1,0 400,0a200,200 0 1,0 -400,0" />

  <path id="textcircle1" stroke="red" fill="none" d="M56,256a200,200 0 1,1 400,0" />

  <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FFAD01;" dy="35" dx="90">
    <textPath xlink:href="#textcircle">
      Lorem
    </textPath>
  </text>
  <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FF7101;" dy="35" dx="420">
    <textPath xlink:href="#textcircle">
      Ipsum
    </textPath>
  </text>

  <g style="font-family: sans-serif; font-weight: 900; font-size:1.2em;" text-anchor="middle">
    <text fill="#B957A" dy="-10">
      <textPath startOffset="80%" xlink:href="#textcircle1">
        Dolor
      </textPath>
    </text>
    <text style="fill:#00B831;" dy="-10">
      <textPath xlink:href="#textcircle1" startOffset="20%">
        Sit amet
      </textPath>
    </text>
</svg>