html - 路径内的 SVG flex 文本

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>