SVG：带有带有文本路径的扇区的圆圈

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

How Align the top sector with the circle.

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

实现的

此属性表示圆起点的偏移量。我们将圆圈移动四分之一圈和八分之一圈 78.5 + 39.25 = 117.75

How to Make the textPath transparent.

style="fill:none;stroke:none"

Why the circle is overflow the 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>

SVG：带有带有文本路径的扇区的圆圈

SVG: Circle with sector with textPath

html

svg

svg-animate

奖金