SVG 中心文本在圆圈中

Question

我正在尝试将文本置于 SVG 圆的中心。 查看了以前的解决方案，但无法使其工作。

如何才能让以下示例将“X”置于圆圈中心而不修改 x/y 坐标或字体大小？

红色十字表示中间。

<svg  width="200px" height="200px">
    <circle r="50" cx="100" cy="100"></circle>  
    <text x="100" y="100" fill="white" font-size="100" text-anchor="middle" dominant-baseline="middle" font-family="Verdana">X</text>  
    <line x1="50" y1="100" x2="150" y2="100" stroke="red" stroke-width="2"></line>
    <line x1="100" y1="50" x2="100" y2="150" stroke="red" stroke-width="2"></line>     
</svg>

https://codepen.io/rolle1234/pen/yLwLxQa

Answer 1

您可以调整 <text> 元素的

dy

属性，将文本稍微向上移动。然后 dy 属性控制文本相对于 y 坐标的垂直偏移。看例子：

<svg width="200px" height="200px">
    <circle r="50" cx="100" cy="100"></circle>  
    <text x="100" y="100" fill="white" font-size="100" text-anchor="middle" dominant-baseline="middle" font-family="Verdana" dy=".10em">X</text>  
    <line x1="50" y1="100" x2="150" y2="100" stroke="red" stroke-width="2"></line>
    <line x1="100" y1="50" x2="100" y2="150" stroke="red" stroke-width="2"></line>     
</svg>