SVG：带有textPath的扇形圆圈

Question

我绝对是 SVG 的初学者，我必须创建类似这样的图片：

规格：

• 圈子
• 顶部扇形 (90°)
• 顶部扇区有一些文字

这是我的尝试：

<svg viewBox="0 0 100 100">

    <circle cx="50%" cy="50%" r="50%" style="fill:none;stroke:#00be00;stroke-width:5" />
    <path id="top-sector" style="fill:none;stroke:#be3000" d="M 15,37 A 50,50 0 0 1 80,50" />

    <text text-anchor="middle">
      <textPath xlink:href="#top-sector" startOffset="50%" style="font-size: 6px;">Hello World</textPath>
    </text>

</svg>

JsFiddle：https://jsfiddle.net/9hprLxat/2/

我不知道：

• 如何将顶部扇区与圆圈对齐。
• 如何使 textPath 透明。
• 为什么圆圈溢出viewBox 感谢您的帮助！

Answer 1

也许是这样

<svg  xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%" viewBox="0 -10 120 120">

          <!-- Green circle    -->
   <circle cx="55" cy="55" r="50" style="fill:none;stroke:#92D050;stroke-width:10" />
    <!-- Red segment -->
     <circle  cx="55" cy="55" r="50" stroke="#C0504D" stroke-width="10" stroke-dasharray="78.5 235.5" stroke-dashoffset="117.75" fill="none" />
          <!-- Path for text -->
	 <path id="top-sector" style="fill:none;stroke:none" d="M 9,50 A 46,46.5 0 0 1 100.5,50" /> 
	<text text-anchor="middle">
      <textPath xlink:href="#top-sector" startOffset="50%" style="font-size: 10px; font-weight:700;">Hello World</textPath>
    </text>

</svg>

更新

---

红色扇区长度的计算

扇区所在R ="50"处的全圆长度

C=2 * PI * R = 314

红色扇区占据的整圈长度的四分之一是314/4 = 78.5

公式stroke-dasharray ="78.5 235.5" 其中78.5 是破折号； 235.5 - 差距

---

如何将顶部扇区与圆圈对齐。

顶部扇区对齐是使用属性stroke-dashoffset="117.75"实现的

该属性表示圆开始的偏移量。我们将圆圈移动四分之一圈，然后再移动八分之一 78.5 + 39.25 = 117.75

如何使 textPath 透明。

style="fill:none;stroke:none"

为什么圆圈会溢出viewBox

由于宽线相对于圆的轮廓对称定位，因此其外部被切除。

我不得不扩大viewBox并将整个图像向下移动10px viewBox="0 -10 120 120"

奖金

一个扇区内的动画文本移动示例

<svg id="svg1"  xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%" viewBox="0 -10 120 120">

          <!-- Green circle    -->
   <circle cx="55" cy="55" r="50" style="fill:none;stroke:#92D050;stroke-width:10" />
    <!-- Red segment -->
     <circle  cx="55" cy="55" r="50" stroke="#C0504D" stroke-width="10" stroke-dasharray="78.5 235.5" stroke-dashoffset="117.75" fill="none" />
          <!-- Path for text -->
	 <path id="top-sector" style="fill:none;stroke:none" d="M 9,50 A 46,46.5 0 0 1 100.5,50" /> 
	<text id="txt1" text-anchor="middle">
      <textPath xlink:href="#top-sector" startOffset="50%" style="font-size: 10px; font-weight:700;">Hello World 
	     <!-- Text movement animation starts after a click -->
       <animate
	     begin="svg1.click"
		 dur="4s"
		 repeatCount="indefinite"
		 attributeName="startOffset"
		 values="50%;42%;50%;50%;58%;50%;50%"/>
	  </textPath> 
         <!-- Text repainting animation starts after a click	   -->
	   <animate
	     attributeName="fill"
		 to="yellow"
		 begin="svg1.click"
		 dur="0.2s"
		 fill="freeze" /> 
     </text> 
	
	<text x="46%" y="50%" text-anchor="middle" font-size="14px" fill="dodgerblue"> Click me </text>

</svg>