Menu
Suppose I have the following SVG:
<g transform="translate(300, 300)">
<circle r="5px"></circle>
<text>My Label</text>
</g>
I need the label to be centered below the circle. Is there a simple solution to this problem?
209
asked Feb 19 '14 17:02
Add text-anchor="middle" to the text element. Works good!
As you've probably noticed in the SVG above, the attributes CX , CY , and R respectively define where the circle is drawn along the X and Y axis, while R defines the radius of the circle. The CX and CY create the center of the circle, so the circle is drawn around that point.
How Do I Center An Svg In Svg? the svg as follows: You can either add this style = “text-align center:” to the div in order to insert the center text in the div, or you can assign this style = “display:block”; margin; auto”; that style = “display: block”; .
If you want to display text inside a rect element you should put them both in a group with the text element coming after the rect element ( so it appears on top ). The group fits to its content not the other way.
One option:
<g transform="translate(300, 300)">
<circle r="5px"></circle>
<text baseline-shift="-20px" text-anchor="middle">My Label</text>
</g>
The -20px depends on your font size, and maybe someone has a relative way of doing the drop, but the text-anchor="middle" will center the text.
169
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
