title: Upside-down text in SVG textpath
body: <p>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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.full {
    fill:none;
    stroke:#000000;
    stroke-width:0.6px;
  }
  
  .letters {
    font-size: 4px;
    text-align: center;
  }
  .letters textPath {
    /*dominant-baseline: middle;*/
    text-anchor: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;
      &lt;g transform="translate(+0,+25) scale(+1,-1)"&gt;
          &lt;g transform="translate(+05,+05)"&gt;
              &lt;path class="full" d="M17.696252,2.152991 A 11 11 0 0 0  -3.554116,2.152991" /&gt;
              &lt;path class="full" d="M-1.355421,12.070664 A 11 11 0 0 0  3.308846,15.336619" /&gt;
              &lt;path class="full" d="M12.571068,14.526279 A 11 11 0 0 0  16.597347,10.500000" /&gt;
  
              &lt;path id="txt1" fill="none" d="M-3.554116,2.152991 A 11 11 0 0 0  -1.355421,12.070664" /&gt;
              &lt;path id="txt2" fill="none" d="M3.308846,15.336619 A 11 11 0 0 0  12.571068,14.526279" /&gt;
              &lt;path id="txt3" fill="none" d="M16.597347,10.500000 A 11 11 0 0 0  17.696252,2.152991" /&gt;
  
              &lt;text class="letters"&gt;&lt;textPath xlink:href="#txt1" startOffset="50%"&gt;txt1&lt;/textPath&gt;&lt;/text&gt;
              &lt;text class="letters"&gt;&lt;textPath xlink:href="#txt2" startOffset="50%"&gt;txt2&lt;/textPath&gt;&lt;/text&gt;
              &lt;text class="letters"&gt;&lt;textPath xlink:href="#txt3" startOffset="50%"&gt;txt3&lt;/textPath&gt;&lt;/text&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>