Menu
I need some help, when I use svg to draw a cycle and put some text, how to Center Text inside an SVG Path
<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>
272
An easy solution to center text horizontally and vertically in SVG: Set the position of the text to the absolute center of the element in which you want to center it: If it's the parent, you could just do x="50%" y ="50%" .
After you put the text along the top, choose Type > Type on a Path > Options. Click the Flip checkbox. Choose Center from the Align pop-up menu, and Center from the To Path popup menu. Click OK.
You can change the svg viewBox attribute to center the path. This is especially useful if you have several paths in the svg, so you do not have to add a transform to each one. In your example that would be viewBox="0 15.674 144 144" , getting the y-offset the same way as in Pauls answer.
The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point. This attribute is not applicable to other types of auto-wrapped text.
You are part of the way there, but you have made a few mistakes.
text-anchor="center" is wrong. It should be text-anchor="middle".
In addition, you should add startOffset="50%" to the <textPath> element to specify that the text should be centred on the half-way point of the path.
Finally you need to fix the path itself. You need to remove the Z path command at the end of the path description. You only want the arc, not the return line back to the start of the 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>Here I place the six texts on a path. The path is a full circle (arc) with the length (pathLength) of 12. Zero is at 12 o'clock. First startOffset is then 1, and so forth. The text is anchored in the middle. The "pizza slices" is made from a <circle> that is masked. The mask is made of three <rect>s that are skewed and rotated.
This is as clean as it can get.
<svg viewBox="0 0 100 100" height="500" width="500"> <defs> <path id="p1" d="M50 10 a 40 40 1 1 0 1 0" pathLength="12" /> <mask id="m1"> <g transform="translate(50 50) rotate(15)"> <rect id="r1" width="50" height="50" fill="white" transform="skewX(15) skewY(15)" /> <use href="#r1" transform="rotate(120)"/> <use href="#r1" transform="rotate(240)"/> </g> </mask> </defs> <circle cx="50" cy="50" r="50" fill="#ddd" mask="url(#m1)"/> <text font-size="6" text-anchor="middle"> <textPath href="#p1" startOffset="1" side="right">1test text</textPath> <textPath href="#p1" startOffset="3" side="right">2test text</textPath> <textPath href="#p1" startOffset="5" side="right">3test text</textPath> <textPath href="#p1" startOffset="7" side="right">4test text</textPath> <textPath href="#p1" startOffset="9" side="right">5test text</textPath> <textPath href="#p1" startOffset="11" side="right">6test text</textPath> </text> </svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
