title: How to Center Text inside an SVG Path
body: <p>I need some help, when I use svg to draw a cycle and put some text, how to Center Text inside an SVG Path</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-html lang-html prettyprint-override"><code> &lt;svg height="500"width="500"&gt;
         &lt;path d="M250 250 L250 0 A250,250,0,0,1,250,0  L250 250 Z"fill="#fff"stroke="#fff"&gt;&lt;/path&gt;
         &lt;defs&gt;
            &lt;path id="p0"d="M250 50 A200,200,0,0,1,250,50 Z"fill="#fff"stroke="#fff"&gt;&lt;/path&gt;
         &lt;/defs&gt;
         &lt;text style="font-size: 24px;"x="0"text-anchor="center"&gt;
            &lt;textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p0"&gt;0test text&lt;/textPath&gt;
         &lt;/text&gt;
         &lt;path d="M250 250 L250 0 A250,250,0,0,1,466.50635094610965,124.99999999999997  L250 250 Z"fill="#ddd"stroke="#ddd"&gt;&lt;/path&gt;
         &lt;defs&gt;
            &lt;path id="p1"d="M250 50 A200,200,0,0,1,423.2050807568877,149.99999999999997 Z"fill="#ddd"stroke="#ddd"&gt;&lt;/path&gt;
         &lt;/defs&gt;
         &lt;text style="font-size: 24px;"x="0"text-anchor="center"&gt;
            &lt;textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p1"&gt;1test text&lt;/textPath&gt;
         &lt;/text&gt;
         &lt;path d="M250 250 L466.50635094610965 124.99999999999997 A250,250,0,0,1,466.5063509461097,374.99999999999994  L250 250 Z"fill="#fff"stroke="#fff"&gt;&lt;/path&gt;
         &lt;defs&gt;
            &lt;path id="p2"d="M423.2050807568877 149.99999999999997 A200,200,0,0,1,423.20508075688775,349.99999999999994 Z"fill="#fff"stroke="#fff"&gt;&lt;/path&gt;
         &lt;/defs&gt;
         &lt;text style="font-size: 24px;"x="0"text-anchor="center"&gt;
            &lt;textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p2"&gt;2test text&lt;/textPath&gt;
         &lt;/text&gt;
         &lt;path d="M250 250 L466.5063509461097 374.99999999999994 A250,250,0,0,1,250.00000000000003,500  L250 250 Z"fill="#ddd"stroke="#ddd"&gt;&lt;/path&gt;
         &lt;defs&gt;
            &lt;path id="p3"d="M423.20508075688775 349.99999999999994 A200,200,0,0,1,250.00000000000003,450 Z"fill="#ddd"stroke="#ddd"&gt;&lt;/path&gt;
         &lt;/defs&gt;
         &lt;text style="font-size: 24px;"x="0"text-anchor="center"&gt;
            &lt;textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p3"&gt;3test text&lt;/textPath&gt;
         &lt;/text&gt;
         &lt;path d="M250 250 L250.00000000000003 500 A250,250,0,0,1,33.49364905389038,375.0000000000001  L250 250 Z"fill="#fff"stroke="#fff"&gt;&lt;/path&gt;
         &lt;defs&gt;
            &lt;path id="p4"d="M250.00000000000003 450 A200,200,0,0,1,76.7949192431123,350.0000000000001 Z"fill="#fff"stroke="#fff"&gt;&lt;/path&gt;
         &lt;/defs&gt;
         &lt;text style="font-size: 24px;"x="0"text-anchor="center"&gt;
            &lt;textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p4"&gt;4test text&lt;/textPath&gt;
         &lt;/text&gt;
         &lt;path d="M250 250 L33.49364905389038 375.0000000000001 A250,250,0,0,1,33.49364905389024,125.00000000000017  L250 250 Z"fill="#ddd"stroke="#ddd"&gt;&lt;/path&gt;
         &lt;defs&gt;
            &lt;path id="p5"d="M76.7949192431123 350.0000000000001 A200,200,0,0,1,76.79491924311219,150.0000000000001 Z"fill="#ddd"stroke="#ddd"&gt;&lt;/path&gt;
         &lt;/defs&gt;
         &lt;text style="font-size: 24px;"x="0"text-anchor="center"&gt;
            &lt;textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p5"&gt;5test text&lt;/textPath&gt;
         &lt;/text&gt;
         &lt;path d="M250 250 L33.49364905389024 125.00000000000017 A250,250,0,0,1,249.99999999999994,0  L250 250 Z"fill="#fff"stroke="#fff"&gt;&lt;/path&gt;
         &lt;defs&gt;
            &lt;path id="p6"d="M76.79491924311219 150.0000000000001 A200,200,0,0,1,249.99999999999994,50 Z"fill="#fff"stroke="#fff"&gt;&lt;/path&gt;
         &lt;/defs&gt;
         &lt;text style="font-size: 24px;"x="0"text-anchor="center"&gt;
            &lt;textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p6"&gt;6test text&lt;/textPath&gt;
         &lt;/text&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>