SVG甜甜圈图中各段之间的间隙

2024-04-28 • 问答

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

df = pd.DataFrame(merge_chat['Full-Chat'].tolist(),index=merge_chat['Ticket-ID']).stack()
df = df.reset_index([0,'Ticket-ID'])
df.rename(columns={0:'Full-Chat'},inplace=True)
df
  Ticket-ID Full-Chat
0   1   foo foo foo
1   1   foo foo
2   1   foo
3   2   bar bar bar
4   2   bar bar

CSS：

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

我唯一的想法是创建另一个圆，该圆会给人以错觉的感觉，但是1）必须有一个更好的解决方案，2）我不确定如何为该圆计算dasharray的值。

这里是demo。

解决方案可能是这样：

下面是一个完整的灰色圆圈
灰色圆圈上方是紫色圆圈

 <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"，其中25-破折号，0-间隙0-破折号，75-间隙
stroke-dashoffset="25"-将圆的起点逆时针移动四分之一

使用口罩，切出两条窄条

 <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,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>

希望对您有帮助

SVG甜甜圈图中各段之间的间隙

ygzboy 回答：SVG甜甜圈图中各段之间的间隙

大家都在问