Center <text> in SVG

loading views

Text in the element of SVGs can be horizontally centered around its origin using text-anchor="middle" and vertically using dominant-baseline="middle".

This is especially useful when trying to label distinct points inside the SVG.

Code

<svg width="200" height="200" viewPort="0 0 200 200">
    <circle cx="100" cy="100" r="100" fill="pink" />

    <text
        x="100"
        y="100"
        style="font: bold 40px sans-serif;"
        fill="black"
        dominant-baseline="middle"
        text-anchor="middle"
    >
        Love
    </text>
</svg>

Demo

Love