我想在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>
最佳答案
我已经通过执行以下操作来实现这一目标:
<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>