center text in SVG shapes

Whenever you place text inside any SVG shape (rectangle, ellipse, circle etc), you would like to center text in SVG shape. In HTML placing a text relative to parent can be easily done using “text-align: center” property, similarly you can place text center of SVG shape with help of “text-anchor: middle”.  For SVG, it is not that straight forward but i will explain below, how you can achieve it. Let’s first of all create an svg tag as follow:

Now lets add a <g> tag inside svg to group multiple tag inside.

Now let’s add a circle and text tag inside <g> tag. …

Continue Reading