Css SVG圆心文本

我正在尝试使用svg将文本置于圆圈的中心

文本的大小将是动态的

谢谢 阿维

我的代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 500 500">

  <g id="UrTavla">
      <circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245">

      </circle>
      <text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em"> Look, I’m centered!Look, I’m centered! </text>
  </g>
</svg>

看，我在中间！看，我在中间！

将

text-anchor=“middle”

添加到

text

元素中

看，我在中间！看，我在中间！

也许，也可能有用

alignment-baseline=“middle”

，使用

text-anchor=“middle”

：

看，我在中间！看，我在中间！

这里有一个很好的资源：

---

干杯

当您要绘制一个不以容器为中心的

圆圈时，建议和接受的解决方案无效

仅当SVG元素包含以视口为中心的圆时，在
text
标记上使用
x=“50%”
y=“50%”

如果要绘制3个圆，还必须更改（x，y）文本坐标，使其等于（cx，cy）圆坐标，该坐标在以下示例中已完成

按照
random
的建议，我在代码段的第一个圆圈中添加了
alignment baseline=“middle”
，这样您就可以看到
标签的文本现在完全对齐（垂直）



标签
票
维克托
一个处理非中心圆的简单解决方案是将圆和文本放入翻译组中

这样，您就不需要重复文本上的坐标



中心文本
看，我在中间！
看，我也在居中！
在SVG圆圈中创建文本中心非常容易

<svg height="300" width="300">
      <circle cx="120" cy="120" r="30%" fill="#117da9" />
      <text x="50" y="120" fill="white">Center Text in SVG Circle</text>
</svg>


在SVG圆圈中居中文本

您所需要做的就是更改标记x和y的值，直到给定的文本在圆的中心对齐。
例如，这里的x和y值是x=“50”y=“120”
使用
alignment baseline=“central”
的浏览器之间的行为不一致。值得注意的是，Chrome会正确定位，但Firefox不会。如果使用
主基线=“中心”
它将正确显示在这两种模式中

      <svg viewBox="0 0 500 500" role="img" xmlns="http://www.w3.org/2000/svg">
        <g id="myid">
        <circle stroke="darkgray" stroke-width="1px" fill="lightgray"  cx="250" cy="250" r="245"/>
        <text style="font: bold 10rem sans-serif;" text-anchor="middle" dominant-baseline="central" x="50%" y="50%">Centered</text> 
        </g>     
      </svg> 


居中的
如果他们的圆没有在整个svg中居中会怎样？那你怎么把文字放在圆圈的中心呢？e、 g.@Michael如果是那样的话，我会使用JavaScript将文本居中，效果很好！但是为什么是魔法数字。3em代表dy而不是其他值呢？@Michael使用圆的半径和当前位置。i、 e：文本的当前cx+radius=x值这不应该是可接受的答案，因为它取决于圆本身的居中，此外，它使用y偏移量垂直居中文本，y偏移量取决于字体大小。相反，
text
元素的
x
和
y
属性应该与
cx
和
cy
元素的
circle
属性相等，属性
textachor='middle'
和
alignmentBaseline='central'
应该添加到
text
元素中。有关详细信息，请参见下面的备选答案。如果您使用
alignment-baseline=“central”
，则不需要
dy
属性，如果您使用
magnive-baseline=“central”
而不是
alignment-baseline
，它也可以在Firefox中使用。（）它适用于大圆圈，但我们看不到的是文本没有很好地垂直居中。您必须添加
alignment-baseline=“middle”
或
primary-baseline=“middle”
，作为其他答案say@random：谢谢。我在第一圈的代码中添加了您的建议，并在回答中添加了一些注释。
      <svg viewBox="0 0 500 500" role="img" xmlns="http://www.w3.org/2000/svg">
        <g id="myid">
        <circle stroke="darkgray" stroke-width="1px" fill="lightgray"  cx="250" cy="250" r="245"/>
        <text style="font: bold 10rem sans-serif;" text-anchor="middle" dominant-baseline="central" x="50%" y="50%">Centered</text> 
        </g>     
      </svg>