SVG：使用textPath与扇形圈

2024-05-20 • 问答

我绝对是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 恭喜您！

也许是

<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" /> 
	<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：使用textPath与扇形圈

wolfll 回答：SVG：使用textPath与扇形圈

奖金

大家都在问