web-dev-qa-db-fra.com

Comment centrer du texte dans un chemin SVG

J'ai besoin d'aide, lorsque j'utilise svg pour dessiner un cycle et mettre du texte, comment centrer le texte dans un chemin SVG

 <svg height="500"width="500">
       <path d="M250 250 L250 0 A250,250,0,0,1,250,0  L250 250 Z"fill="#fff"stroke="#fff"></path>
       <defs>
          <path id="p0"d="M250 50 A200,200,0,0,1,250,50 Z"fill="#fff"stroke="#fff"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p0">0test text</textPath>
       </text>
       <path d="M250 250 L250 0 A250,250,0,0,1,466.50635094610965,124.99999999999997  L250 250 Z"fill="#ddd"stroke="#ddd"></path>
       <defs>
          <path id="p1"d="M250 50 A200,200,0,0,1,423.2050807568877,149.99999999999997 Z"fill="#ddd"stroke="#ddd"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p1">1test text</textPath>
       </text>
       <path d="M250 250 L466.50635094610965 124.99999999999997 A250,250,0,0,1,466.5063509461097,374.99999999999994  L250 250 Z"fill="#fff"stroke="#fff"></path>
       <defs>
          <path id="p2"d="M423.2050807568877 149.99999999999997 A200,200,0,0,1,423.20508075688775,349.99999999999994 Z"fill="#fff"stroke="#fff"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p2">2test text</textPath>
       </text>
       <path d="M250 250 L466.5063509461097 374.99999999999994 A250,250,0,0,1,250.00000000000003,500  L250 250 Z"fill="#ddd"stroke="#ddd"></path>
       <defs>
          <path id="p3"d="M423.20508075688775 349.99999999999994 A200,200,0,0,1,250.00000000000003,450 Z"fill="#ddd"stroke="#ddd"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p3">3test text</textPath>
       </text>
       <path d="M250 250 L250.00000000000003 500 A250,250,0,0,1,33.49364905389038,375.0000000000001  L250 250 Z"fill="#fff"stroke="#fff"></path>
       <defs>
          <path id="p4"d="M250.00000000000003 450 A200,200,0,0,1,76.7949192431123,350.0000000000001 Z"fill="#fff"stroke="#fff"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p4">4test text</textPath>
       </text>
       <path d="M250 250 L33.49364905389038 375.0000000000001 A250,250,0,0,1,33.49364905389024,125.00000000000017  L250 250 Z"fill="#ddd"stroke="#ddd"></path>
       <defs>
          <path id="p5"d="M76.7949192431123 350.0000000000001 A200,200,0,0,1,76.79491924311219,150.0000000000001 Z"fill="#ddd"stroke="#ddd"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p5">5test text</textPath>
       </text>
       <path d="M250 250 L33.49364905389024 125.00000000000017 A250,250,0,0,1,249.99999999999994,0  L250 250 Z"fill="#fff"stroke="#fff"></path>
       <defs>
          <path id="p6"d="M76.79491924311219 150.0000000000001 A200,200,0,0,1,249.99999999999994,50 Z"fill="#fff"stroke="#fff"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p6">6test text</textPath>
       </text>
    </svg>
csssvgcycle
16
j leos

Vous faites partie du chemin, mais vous avez fait quelques erreurs.

text-anchor="center" est faux. Ça devrait être text-anchor="middle".

De plus, vous devez ajouter startOffset="50%" à la <textPath> élément pour spécifier que le texte doit être centré sur le point à mi-chemin du chemin.

Enfin, vous devez corriger le chemin lui-même. Vous devez supprimer la commande Z path à la fin de la description du chemin. Vous ne voulez que l'arc, pas la ligne de retour au début de l'arc.

<svg height="500"width="500">
 
  <path d="M250 250 L250 0 A250,250,0,0,1,466.50635094610965,124.99999999999997  L250 250 Z" fill="#ddd" stroke="#ddd"></path>
  <defs>
    <path id="p1" d="M250 50 A200,200,0,0,1,423.2050807568877,149.99999999999997" fill="#ddd" stroke="#ddd"></path>
  </defs>
  <text style="font-size: 24px;">
    <textPath xlink:href="#p1" startOffset="50%" text-anchor="middle">1test text</textPath>
  </text>
  
</svg>
33
Paul LeBeau