我需要一些帮助，当我使用 svg 绘制一个循环并放置一些文本时，如何在 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>最佳答案
你已经完成了一部分，但你犯了一些错误。
text-anchor="center"是错的。应该是text-anchor="middle" .
另外，你应该加上startOffset="50%"到 <textPath>元素指定文本应在路径的中间点居中。
最后您需要修复路径本身。您需要删除 Z路径描述末尾的路径命令。您只需要圆弧，而不是返回到圆弧起点的返回线。
<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>关于css - 如何使 SVG 路径中的文本居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44860320/