Vertically/Horizontally Center Text inside a SVG Path

Question

I would like to vertically/horizontally center a text inside a rectangle made with a SVG Path element.

By center I don't mean having my first letter at the center of the rectangle but having the center of my text at the center of the path.

Here is my code structure:

<svg id="shape">
    <path id = "a" d="M 0 0 L 100 0 L 100 100 L 0 100 Z"></path>
    <text>
        <textPath xlink:href="#a">My Text</textPath>
    </text>
</svg>

I've managed to do it horizontally with a text-anchor and coordinates attribute. but I'm still searching for the vertical way. — JSmith, Jun 13 '17 at 04:45

score 1 · Accepted Answer · answered Jun 13 '17 at 05:13

1

I've managed to achieve that by doing something like this:

<svg id="shape">
    <path id = "a" d="M 0 0 L 100 0 L 100 100 L 0 100 Z"></path>
    <text x="50" y="50" text-anchor="middle" alignement-baseline="middle">My Text</text>
</svg>

answered Jun 13 '17 at 05:13

JSmith

4,519
4
29
45

Vertically/Horizontally Center Text inside a SVG Path

1 Answers1