在SVG路径中垂直/水平居中文本

Question

我想在一个用SVG Path元素制作的矩形内垂直/水平居中文本。

按中心我并不是说我的第一个字母位于矩形的中心，而是将文本的中心放在路径的中心。

这是我的代码结构：

<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>

Answer 1

我通过做这样的事情设法实现了这一目标：

<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>