title: Insert fixed text into svg path
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
   
   &lt;path fill="#009688" stroke="#fff" id="AR" d="M34.5,204.7 L37.7,201.6 L37.7,197.6 L40.7,195.5 L45.3,194.6 L54.1,197.7 L56.9,197.6 L59.2,199.9 L64.4,195.5 L67.0,195.5 L69.5,191.5 L70.2,186.8 L72.4,183.2 L78.8,181.7 L76.7,175.1 L80.6,168.0 L82.9,160.7 L88.8,160.1 L91.1,156.8 L96.0,158.6 L120.4,158.9 L131.3,164.3 L137.7,165.0 L143.2,168.3 L147.3,177.9 L155.0,183.5 L160.3,185.9 L162.1,189.9 L176.4,193.0 L183.0,193.4 L186.3,197.3 L181.3,200.6 L177.3,207.6 L174.3,209.7 L167.1,208.4 L164.7,209.0 L161.8,212.6 L161.1,219.2 L159.2,223.6 L159.8,228.6 L158.3,232.0 L154.6,236.3 L152.0,239.1 L144.9,241.8 L137.8,240.0 L132.7,234.7 L128.5,233.8 L125.3,231.1 L122.0,231.3 L120.0,235.7 L115.2,234.8 L114.8,238.4 L108.9,233.4 L103.7,238.2 L101.2,235.1 L101.7,233.0 L98.0,228.2 L94.4,227.6 L91.5,223.0 L87.0,223.0 L85.7,226.1 L81.9,229.1 L79.2,227.4 L74.2,229.0 L70.1,226.1 L69.5,223.3 L66.4,224.1 L65.2,227.5 L61.9,226.9 L61.2,223.6 L49.3,219.9 L45.4,213.3 Z"&gt;
   &lt;/path&gt; 
   
   &lt;path fill="#009688" stroke="#fff" id="CS" d="M122.0,378.2 L120.1,372.2 L109.2,366.5 L101.6,368.3 L94.1,366.7 L91.5,363.7 L90.1,358.1 L87.4,356.2 L76.4,355.2 L71.5,349.8 L73.7,346.5 L85.3,345.6 L86.8,342.7 L85.3,339.9 L77.3,336.8 L75.7,333.6 L73.4,333.1 L74.4,330.4 L78.9,329.1 L80.9,322.7 L84.9,320.2 L84.5,316.6 L88.3,312.3 L88.6,306.4 L90.6,303.4 L90.0,298.8 L85.7,293.9 L85.1,291.3 L86.7,285.2 L92.1,281.6 L95.3,275.2 L101.2,274.0 L111.5,278.4 L117.8,275.6 L119.6,275.9 L122.2,280.8 L127.5,281.4 L128.6,275.3 L134.5,274.8 L138.4,272.1 L145.6,274.4 L148.4,269.9 L151.2,268.1 L159.5,267.0 L162.0,272.6 L166.0,274.4 L166.2,277.3 L168.7,277.7 L174.2,283.0 L175.9,286.0 L176.9,294.5 L175.0,298.6 L177.0,304.2 L173.7,312.7 L166.1,319.7 L165.4,323.0 L170.5,324.5 L170.8,328.3 L164.8,335.2 L161.8,344.6 L158.4,349.7 L153.9,361.6 L149.7,363.1 L147.4,360.4 L144.1,360.2 L140.6,356.8 L137.6,356.8 L136.0,361.5 L132.6,367.6 L132.3,377.5 L130.8,378.6 Z"&gt;
   &lt;/path&gt; 
   
   &lt;path fill="#009688" stroke="#fff" id="TM" d="M159.5,267.0 L151.2,268.1 L148.4,269.9 L145.6,274.4 L138.4,272.1 L134.5,274.8 L128.6,275.3 L127.5,281.4 L122.2,280.8 L119.6,275.9 L117.8,275.6 L111.5,278.4 L101.2,274.0 L95.3,275.2 L92.1,281.6 L86.7,285.2 L85.1,291.3 L85.7,293.9 L90.0,298.8 L90.6,303.4 L88.6,306.4 L88.3,312.3 L84.5,316.6 L78.9,311.2 L71.1,308.1 L68.0,307.8 L64.3,305.2 L59.8,298.8 L56.1,300.2 L48.2,294.8 L40.1,285.0 L36.9,280.1 L33.0,276.5 L36.3,272.8 L33.5,264.6 L35.9,257.8 L37.0,249.2 L35.6,247.6 L31.5,250.9 L27.6,245.9 L26.2,239.8 L22.4,233.7 L15.9,230.5 L6.0,221.1 L4.1,214.5 L0.0,208.3 L3.3,204.8 L15.2,205.5 L17.2,202.7 L23.0,205.1 L27.0,208.3 L32.8,207.1 L34.5,204.7 L45.4,213.3 L49.3,219.9 L61.2,223.6 L61.9,226.9 L65.2,227.5 L66.4,224.1 L69.5,223.3 L70.1,226.1 L74.2,229.0 L79.2,227.4 L81.9,229.1 L85.7,226.1 L87.0,223.0 L91.5,223.0 L94.4,227.6 L98.0,228.2 L101.7,233.0 L101.2,235.1 L103.7,238.2 L108.9,233.4 L114.8,238.4 L115.2,234.8 L120.0,235.7 L122.0,231.3 L125.3,231.1 L128.5,233.8 L132.7,234.7 L137.8,240.0 L144.9,241.8 L152.0,239.1 L154.6,236.3 L157.0,239.1 L158.3,245.7 L160.9,248.6 L164.4,255.5 L167.2,257.0 L162.5,261.2 Z"&gt;
   &lt;/path&gt;
   
   &lt;text font-family="Verdana" font-size="30" fill="#fff"&gt;
    &lt;textPath xlink:href="#AR"&gt;
    AR
    &lt;/textPath&gt;
   &lt;/text&gt;  
  
    &lt;text font-family="Verdana" font-size="30" fill="#fff"&gt;
      &lt;textPath xlink:href="#CS"&gt;
        CS
      &lt;/textPath&gt;
    &lt;/text&gt; 
    
    &lt;text font-family="Verdana" font-size="30" fill="#fff"&gt;
      &lt;textPath xlink:href="#TM"&gt;
        TM
      &lt;/textPath&gt;
    &lt;/text&gt; 
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to insert horizontal fixed text (centered to path if possible)?</p>
  
  <p>I have used some like this but the text is rotated and out of the path (see code snippet)</p>
  
  <pre><code>  &lt;text font-family="Verdana" font-size="30" fill="#fff"&gt;
      &lt;textPath xlink:href="#TM"&gt;
        TM
      &lt;/textPath&gt;
    &lt;/text&gt;
  </code></pre>
  
  <p>this was expected:</p>
  
  <p><a href="https://i.stack.imgur.com/uAjsy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uAjsy.png" alt="that was expected:"></a></p>