将文字放在圆圈中

Question

<div id="container">
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="15vw" height="15vw" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
    <defs>
        <path id="criclePath"  d=" M 150, 150 m -120, 0 a 120,120 0 0,1 240,0 a 120,120 0 0,1 -240,0 "/>
    </defs>
    <circle cx="150" cy="150" r="100" fill="none" stroke="#000"/>
    <g>
        <use xlink:f="#criclePath" fill="none"/>
      <text fill="#000" style="font-size: 2.4em; font-weight:900; letter-spacing:-0.03em; text-align:justify">
          <textPath xlink:href="#criclePath">EDUCATION . INSPIRATION . VACATION . </textPath>
        </text>
    </g>
</svg>
</div>
</div>

JSFIDDLE

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

Answer 1

您可以使用text-anchor和dominant-baseline来执行此操作。

IE上不支持

dominant-baseline，因此如果您需要完整的跨浏览器支持，则可能需要使用dy单位em手动调整位置。

text-anchor

  

中间

     

渲染的字符对齐以使几何形状   生成的渲染文本的中间位于初始当前文本   位置。

dominant-baseline

  

中间

     

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

Live Demo

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

和dy

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

多行

Live Demo with multiple lines

<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>

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

错误解决方法

Live Demo

在Firefox中，圆圈中的文字未正确对齐，甚至没有关闭。以下是在中心执行文本的另一种方法：

<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>

On May 2016, Firefox does not support the letter-spacing attribute (yet?)。因为在Firefox中圈子不合理。一个快速的解决方法是修复字体大小以使其工作。我可能会找到更好的解决方案。