SVG在路径内弯曲文本

Question

大家好我用SVG创建了一个带有5个段的圆圈，即时尝试在段内添加文本，但我无法让它正常工作。

这就是我想要做的Text curved and centered inside the path

这就是我得到的：enter image description here

这是我的代码到目前为止，有什么建议吗？

<svg  viewBox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);">
   <a xlink:href="">
      <path  class="frag logoa" id="f1" data-link="1" d='M55,55 L14.54915028125263,25.61073738537635 A50,50 0 0,1 70.45084971874736,7.447174185242318z' >
      </path>
      <text font-family="Verdana" font-size="15" stroke="red";>
         <textPath xlink:href="#f1">
            We go up, then we go down, then up again
         </textPath>
      </text>
   </a>
   <a xlink:href="" >
      <path class="frag logoa" data-link="2" d='M55,55 L70.45084971874736,7.447174185242318 A50,50 0 0,1 105,54.999999999999986z' ></path>
   </a>
   <a xlink:href="" >
      <path class="frag logoa" data-link="3" d='M55,55 L105,55 A50,50 0 0,1 70.45084971874738,102.55282581475768z'></path>
   </a>
   <a xlink:href=""  >
      <path class="frag logoa" data-link="4" d='M55,55 L70.45084971874738,102.55282581475768 A50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path>
   </a>
   <a xlink:href=""   >
      <path class="frag logoa" data-link="5" d='M55,55 L14.549150281252636,84.38926261462366 A50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path>
   </a>
   <circle class="cente" cx='55' cy='55' r='35' ></circle>
   <circle class="minicirculo" cx='55' cy='55' r='15' ></circle>
</svg>

Answer 1

您当前正在使用其中一个圆弧段路径作为文本的路径。见下文。

path, circle {
  fill: transparent;
  stroke: black;
}

<svg  viewBox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);">
   <a xlink:href="">
      <path  class="frag logoa" id="f1" data-link="1" d='M55,55 L14.54915028125263,25.61073738537635 A50,50 0 0,1 70.45084971874736,7.447174185242318z' >
      </path>
      <text font-family="Verdana" font-size="4" fill="red";>
         <textPath xlink:href="#f1">
            We go up, then we go down, then up again
         </textPath>
      </text>
   </a>
   <a xlink:href="" >
      <path class="frag logoa" data-link="2" d='M55,55 L70.45084971874736,7.447174185242318 A50,50 0 0,1 105,54.999999999999986z' ></path>
   </a>
   <a xlink:href="" >
      <path class="frag logoa" data-link="3" d='M55,55 L105,55 A50,50 0 0,1 70.45084971874738,102.55282581475768z'></path>
   </a>
   <a xlink:href=""  >
      <path class="frag logoa" data-link="4" d='M55,55 L70.45084971874738,102.55282581475768 A50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path>
   </a>
   <a xlink:href=""   >
      <path class="frag logoa" data-link="5" d='M55,55 L14.549150281252636,84.38926261462366 A50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path>
   </a>
   <circle class="cente" cx='55' cy='55' r='35' ></circle>
   <circle class="minicirculo" cx='55' cy='55' r='15' ></circle>
</svg>

显然你这条路是不合适的。您需要添加一条新的，更简单的路径，该路径从段的左侧到段的右侧。您需要为每个细分都执行此操作。

或者，您可以使用形成整个圆的路径，然后为每个段重用该路径。但是为每个属性指定不同的startOffset属性，对应于它们在圆周围的位置。

在以下示例中，我创建了一个半径为40的圆形路径。

<path id="clockwise" d="M55,15 A40,40 0 0 1 55,95 A40,40 0 0 1 55,15"/>

然后我为每个段使用相同的路径。为了使每个段中的文本容易​​居中，我使用属性text-anchor="middle"，这将导致文本以我们指定的startOffset为中心。

我们可以使用百分比来指定我们希望文本开始的循环路径的距离。 0％将是路径的开始（也是第一个段的左侧），20％将是第二个段的开始，等等。

因此，对于第一个片段，我们希望文本在中间的某个点居中，因此我们使用startOffset="10%"。对于后续细分，我们将使用“30％”，“50％”等。

在下面的例子中，我完成了前三个部分。我会留下最后两个让你完成。

要了解有关<textPath>如何工作的更多信息，read the relevant section of the SVG specification。

path, circle {
  fill: transparent;
  stroke: black;
}

<svg viewBox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);">
   <defs>
     <!-- Circular path with a radius of 40 -->
     <path id="clockwise" d='M55,15 A40,40 0 0 1 55,95 A40,40 0 0 1 55,15'
           transform="rotate(-54,55,55)"/>
   </defs>
   <a xlink:href="">
      <path  class="frag logoa" id="f1" data-link="1" d='M55,55 L14.54915028125263,25.61073738537635 A50,50 0 0,1 70.45084971874736,7.447174185242318z' >
      </path>
      <text font-family="Verdana" font-size="6" fill="red";>
         <textPath xlink:href="#clockwise" startOffset="10%" text-anchor="middle">
            Cloud Marina
         </textPath>
      </text>
   </a>
   <a xlink:href="" >
      <path class="frag logoa" data-link="2" d='M55,55 L70.45084971874736,7.447174185242318 A50,50 0 0,1 105,54.999999999999986z' ></path>
      <text font-family="Verdana" font-size="6" fill="red";>
         <textPath xlink:href="#clockwise" startOffset="30%" text-anchor="middle">
            Order This
         </textPath>
      </text>
   </a>
   <a xlink:href="" >
      <path class="frag logoa" data-link="3" d='M55,55 L105,55 A50,50 0 0,1 70.45084971874738,102.55282581475768z'></path>
      <text font-family="Verdana" font-size="6" fill="red";>
         <textPath xlink:href="#clockwise" startOffset="50%" text-anchor="middle">
            Earn This
         </textPath>
      </text>
   </a>
   <a xlink:href=""  >
      <path class="frag logoa" data-link="4" d='M55,55 L70.45084971874738,102.55282581475768 A50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path>
   </a>
   <a xlink:href=""   >
      <path class="frag logoa" data-link="5" d='M55,55 L14.549150281252636,84.38926261462366 A50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path>
   </a>
   <circle class="cente" cx='55' cy='55' r='35' ></circle>
   <circle class="minicirculo" cx='55' cy='55' r='15' ></circle>
</svg>