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

【问题标题】：Vertically/Horizontally Center Text inside a SVG Path在 SVG 路径中垂直/水平居中文本
【发布时间】：2017-06-13 04:13:15
【问题描述】：

我想在使用 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>

【问题讨论】：

我已经设法用文本锚和坐标属性水平地做到了。但我还在寻找垂直的方式。
stackoverflow.com/a/15997503/1038015
刚看到这个，谢谢

标签： javascript html css svg graphics

【解决方案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>

【讨论】：