Comment centrer le texte dans un SVG chemin

Question

J'ai besoin d'aide, quand je l'utilise svg pour dessiner un cycle et mettre un peu de texte, comment centrer le texte dans un SVG chemin

<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> 

Answer 1

Vous êtes une partie du chemin là, mais vous avez fait quelques erreurs.

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

En outre, vous devez ajouter startOffset="50%" à l'élément <textPath> 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 de chemin Z à 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>