Question

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

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

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

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

SVG在路径内弯曲文本

1 个答案: