jquery - 将文本放在圆圈中

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

middle

The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position.

dominant-baseline

middle

Use the “middle” baseline: halfway between the alphabetic baseline and the ex-height.

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 中不合理。一个快速的解决方法是修复字体大小以使其正常工作。我可能会找到更好的解决方案。