Jquery 将文本放在圆圈中 教育。灵感。假期

我想把标准文本放在水平和垂直居中的圆圈内。此文本必须与圆圈一起缩放。我一直在努力。有人能帮忙吗？

你可以使用和来做这件事

IE上不正确支持

主基线

，因此如果需要完全跨浏览器支持，您可能需要使用

em

单元中的

dy

手动调整位置

中间的 渲染的字符对齐，以便几何图形 结果渲染文本的中间部分位于初始当前文本处 位置

中间的 使用“中间”基线：字母之间的中间 基线和前高度

多行

定心
圈内

第一条线离中心有半条线。第二个向下移动一整行。两者都在水平中心

错误解决方法 在Firefox中，圆圈中的文本没有正确对齐，甚至没有接近。下面是一种在中间显示文本的替代方法：

<text x="150" y="160" text-anchor="middle" font-size="39">
    <tspan x="150" dy="-0.5em">Centering</tspan>
    <tspan x="150" dy="1em">in ring</tspan>
</text>

无优先权
知识是
必需的
初学者

---

。这个圆圈在Firefox中是不合理的。一个快速的解决方法是修正字体大小以使其正常工作。我可能会找到更好的解决方案。

谢谢！是的，我肯定需要跨浏览器兼容性。我还需要添加多行文字。这似乎是您的解决方案的一个问题。多行是在svg中使用

子元素在

元素下完成的。信不信由你，svg中没有换行。如果你想作弊，你可以在里面放一个外来的

div

元素。那是欺骗。如果要制作实际的svg图形，而不是插入浏览器

div

，则必须对其进行包装。是否需要多行？你需要文字包装吗？你的问题没有说这些，所以我没有偏离正切，而是在答案中添加了多行。

<text x="150" y="160" 
      text-anchor="middle"
      dominant-baseline="middle"
      font-size="50">Centering</text>

<text x="150" y="160"
      text-anchor="middle"
      font-size="50" 
      dy="0.225em">Centering</text>

<text x="150" y="160" text-anchor="middle" font-size="39">
    <tspan x="150" dy="-0.5em">Centering</tspan>
    <tspan x="150" dy="1em">in ring</tspan>
</text>

<text x="150" y="150" dy="-1.7em"
  fill="#000" font-size="25" text-anchor="middle" 
  letter-spacing="-0.03em">no prior</text>
<text x="150" y="150" dy="-0.6em" 
  fill="#000" font-size="25" text-anchor="middle"
  letter-spacing="-0.03em">knowledge is</text>
<text x="150" y="150" dy="0.6em"
  fill="#000" font-size="25" text-anchor="middle"
  letter-spacing="-0.03em">required for</text>
<text x="150" y="150" dy="1.7em" 
  fill="#000" font-size="25" text-anchor="middle" 
  letter-spacing="-0.03em">beginners</text>