时间戳

首页 > 解决方案 > 纯分段 CSS SVG 甜甜圈

css - 纯分段 CSS SVG 甜甜圈

问题描述

我正在寻找一个纯动态 css3 或 svg 甜甜圈步骤图，如下图所示。

CSS SVG 甜甜圈

我试图用 svg 制作它，但我无法让它工作。

.donut-chart {
  width: 190px;
}

    html {
      box-sizing: border-box;
    }

    *, *:before, *:after {
      box-sizing: inherit;
    }
    @import url(https://fonts.googleapis.com/css?family=Montserrat:400);

    .chart-text {
      font: 16px/1.4em "Montserrat", Arial, sans-serif;
      fill: #000;
      -moz-transform: translateY(0.25em);
      -ms-transform: translateY(0.25em);
      -webkit-transform: translateY(0.25em);
      transform: translateY(0.25em);
    }

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

    .chart-label {
      font-size: 0.2em;
      text-transform: uppercase;
      text-anchor: middle;
      -moz-transform: translateY(0.7em);
      -ms-transform: translateY(0.7em);
      -webkit-transform: translateY(0.7em);
      transform: translateY(0.7em);
    }
<div class="donut-chart">

   <svg 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="33 67" 
          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="33 67" 
          stroke-dashoffset="-9"></circle>
     
   </svg>
  </div>

如何在步骤之间添加空格？我还需要从甜甜圈的顶部开始添加渐变背景色，有什么帮助吗？

标签： csssvg

解决方案

推荐阅读