svg - stroke-dashoffset，位置stroke-dasharray

Question

我有 3 个 svg donut chart 表，每个图表都有一条用 stroke-dasharray 创建的线，所有图表加起来为 100%。

我希望每个图表都从最后一个图表结束的地方开始，所以第一个图表是从 0-60%。我希望第二张图表从 60% 开始到 90%，最后一张图表从 90% 到 100%

我正在尝试使用 stroke dashoffset 来实现这一点，但我不知道它是如何工作的。

<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>

  <circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="green" 
          stroke-width="3" 
          stroke-dasharray="60 40" 
          stroke-dashoffset="25"></circle>
</svg>






<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>

  <circle class="donut" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="red" 
          stroke-width="3" 
          stroke-dasharray="30 70" 
          stroke-dashoffset="60"></circle>
</svg>







<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>

  <circle class="donut" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="grey" 
          stroke-width="3" 
          stroke-dasharray="10 90" 
          stroke-dashoffset="-"></circle>
</svg>

Answer 1

半径为 r ="15.91 的圆周等于 2 * 3.1415 * 15.91 = 99.96 ∼ 100

stroke-dasharray="60 40"，其中

60 - 破折号
40 - 差距

正值 stroke-dashoffset = 25 将线逆时针移动四分之一圆。
由于默认 - stroke-dashoffset = 0 圆将从 90 度开始，即从第一象限的 x 轴开始

<svg width="50%" height="50%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!--  first chart is from 0-60% -->
  <circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="green" 
          stroke-width="3" 
          stroke-dasharray="60 40" 
          stroke-dashoffset="25">
  </circle>

• 负值 stroke-dashoffset = -35 移动第二个，红色 顺时针转圈到第一条绿线的尽头(25-60 = -35)

<svg width="50%" height="50%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!--  first chart is from 0-60% -->
  <circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="green" 
          stroke-width="3" 
          stroke-dasharray="60 40" 
          stroke-dashoffset="25"></circle>
  <!--  second chart to start at 60% and go to 90% -->	
	<circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="red" 
          stroke-width="3" 
          stroke-dasharray="30 70" 
          stroke-dashoffset="-35"></circle>	
   </svg>       

• 负值 stroke-dashoffset = -65 移动第三个，橙色 顺时针转圈到第二条红线的尽头(-35-30 = -65)

<svg width="50%" height="50%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!--  first chart is from 0-60% -->
  <circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="green" 
          stroke-width="3" 
          stroke-dasharray="60 40" 
          stroke-dashoffset="25"></circle>
  <!--  second chart to start at 60% and go to 90% -->	
	<circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="red" 
          stroke-width="3" 
          stroke-dasharray="30 70" 
          stroke-dashoffset="-35"></circle>	
	<!--  final chart to start at 90% to 100%  -->
	<circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="orange" 
          stroke-width="3" 
          stroke-dasharray="10 90" 
          stroke-dashoffset="-65"></circle>		  
		  
		  
</svg>