How to Center Texts in SVG?

I wanted to render a text at the center of a <rect> element in SVG. After exploring, I found two solutions; one is configuring attributes of the text element, and the other one is embedding an HTML tag inside the body of an SVG tag.

Solution #1. Configure attributes of the text tag

You can center the text by setting the attributes of the text tag like below.

<!-- Given that the outer rect starts from (0, -50)
	and its width and height are both 100
-->
<text x="50" y="0" dominant-baseline="middle" text-anchor="middle">Foreman</text>

See also

• dominant-baseline
• text-anchor

Solution #2. Embed an HTML element inside SVG

You can embed HTML elements using a <foreignObject> tag. I used <div> tags with some flex box attributes  to center the texts inside the <foreignObject> tag. Please check the Gist for detail.