SVG 圆环图中段之间的间隙

Question

我正在使用 SVG 和 CSS 创建一个圆环图，我想在圆环段之间添加一个小间隙。我对 stroke-dasharray 的值来自 Django。这是我的代码：

<div class="dashboard-balance">
  <figure>
    <svg width="100%" height="100%" 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="#F9FAFC" stroke-width="5"></circle>
      <circle id="income" class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#4E0E7C" stroke-width="5" stroke-dasharray="25.00 75.00" stroke-dashoffset="25"></circle>
      <circle id="expense" class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ebebeb" stroke-width="5" stroke-dasharray="75.00 25.00" stroke-dashoffset="100.00"></circle>
      <g class="chart-text">
        <text x="50%" y="50%" class="chart-number">250.00</text>
        <text x="50%" y="50%" class="chart-label">Balance</text>
      </g>
    </svg>
  </figure>
</div>

CSS：

.dashboard-balance {
    width: 350px;
    height: 400px;
    box-sizing: border-box;
}

.chart-text {
    font-family: sans-serif;
    fill: #000;
    transform: translateY(0.25em);
}

.chart-number {
    font-size: 0.15em;
    line-height: 1;
    text-anchor: middle;
    transform: translateY(-0.25em);
}

.chart-label {
    font-size: 0.15em;
    font-weight: bold;
    text-transform: uppercase;
    text-anchor: middle;
    transform: translateY(0.7em);
}

我唯一的想法是创建另一个圆，它会给人一种有间隙的错觉，但 1) 必须有更好的解决方案，2) 我不知道如何计算该圆的 dasharray 的值。

这里是demo。

Answer 1

解决办法是这样的：

1. 下面是一个完整的灰色圆圈
2. 灰色圆圈上方是紫色圆圈扇区

 <circle id="income" class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" 
             stroke="#4E0E7C"  stroke-width="5" stroke-dasharray=" 25 0  0 75 " stroke-dashoffset="25">
 </circle> 

stroke-dasharray=" 25,0 0,75" where 25 - dash,0 - gap 0 - dash, 75 - gap
stroke-dashoffset="25" - 将圆的起点逆时针移动四分之一

1. 使用口罩，剪下两条窄条

 <mask id="msk1"> 
       <rect width="100%" height="100%" fill="white"/>
         <polyline points="21,0 21, 21" fill="black" stroke="black" stroke-width="1"  />
          <polyline points="21, 21 42 21" fill="black" stroke="black" stroke-width="1"  />
 </mask> 

下面是完整代码

<style>
.dashboard-balance {
    width: 350px;
    height: 400px;
    box-sizing: border-box;
}

.chart-text {
    font-family: sans-serif;
    fill: #000;
    transform: translateY(0.25em);
}

.chart-number {
    font-size: 0.15em;
    line-height: 1;
    text-anchor: middle;
    transform: translateY(-0.25em);
}

.chart-label {
    font-size: 0.15em;
    font-weight: bold;
    text-transform: uppercase;
    text-anchor: middle;
    transform: translateY(0.7em);
}
</style>
<div class="dashboard-balance">
  <figure>
    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
      <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle> 
    
 <defs>
	 <mask id="msk1"> 
	   <rect width="100%" height="100%" fill="white"/>
	     <polyline points="21,0 21, 21" fill="black" stroke="black" stroke-width="1"  />
	      <polyline points="21, 21 42 21" fill="black" stroke="black" stroke-width="1"  />
     </mask> 
</defs>	
   
	<g mask="url(#msk1)">
      <circle id="expense" class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent"
     	  stroke="#ebebeb" stroke-width="5" >
	  </circle>  
	     <circle id="income" class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" 
		     stroke="#4E0E7C"  stroke-width="5" stroke-dasharray=" 25 0  0 75 " stroke-dashoffset="25">
		 </circle> 
	</g>  
	  
	  
     
	  <g class="chart-text">
        <text x="50%" y="50%" class="chart-number">250.00</text>
        <text x="50%" y="50%" class="chart-label">Balance</text>
      </g>
    </svg>
  </figure>
</div>

希望对你有帮助