Question

我遵循了一个有关如何构建简单的svg图表的简单示例。我尝试在同一个viewBox中添加多个圆圈，这些圆圈将填充0到100％之间的颜色，但我无法将其描边到100％。

stroke-dasharray =“ 75,100” stroke-dasharray =“ 100,100”

这是codepen链接。任何有任何想法或解决方法的人

[https://codepen.io/malawi-realestate/pen/MzKpwp][1]

<svg class="circular-chart" viewBox="0 0 50 50"><path class="circle-bg" d="M18 1
              a 23.4155 23.4155 0 0 1 0 46.831
              a 23.4155 23.4155 0 0 1 0 -46.831"></path><path class="circle circle-ok" d="M18 1
              a 23.4155 23.4155 0 0 1 0 46.831
              a 23.4155 23.4155 0 0 1 0 -46.831" stroke-dasharray="100, 100"></path><path class="circle-bg" d="M18 4
             a 20.4155 20.4155 0 0 1 0 40.831
             a 20.4155 20.4155 0 0 1 0 -40.831"></path><path class="circle circle-bad" d="M18 4
             a 20.4155 20.4155 0 0 1 0 40.831
             a 20.4155 20.4155 0 0 1 0 -40.831" stroke-dasharray="75, 100"></path><path class="circle-bg" d="M18 7
             a 17.4155 17.4155 0 0 1 0 34.831
             a 17.4155 17.4155 0 0 1 0 -34.831"></path><path class="circle circle-none" d="M18 7
             a 17.4155 17.4155 0 0 1 0 34.831
             a 17.4155 17.4155 0 0 1 0 -34.831" stroke-dasharray="50, 100"></path><path class="circle-bg" d="M18 10
             a 14.4155 14.4155 0 0 1 0 28.831
             a 14.4155 14.4155 0 0 1 0 -28.831"></path><path class="circle circle-empty" d="M18 10
             a 14.4155 14.4155 0 0 1 0 28.831
             a 14.4155 14.4155 0 0 1 0 -28.831" stroke-dasharray="80, 100"></path><text class="percentage" x="18" y="26">5.5</text><text class="chart-text" x="18" y="30">Your score</text></svg>

Answer 1

我不太确定我是否理解您的问题。如果需要在整个圆周上旋转动画，则需要计算路径的长度。在您的情况下，.circle-ok路径的长度是圆的周长

 let perimeter_ok  = 2 * Math.PI * 23.4155;//147.124

或者，您可以使用getTotalLength()方法来计算路径的长度

let ok = document.querySelector(".circle-ok")
let perimeter_ok  = ok.getTotalLength();

您可以使用周长设置stroke-dasharray值。

<path class="circle circle-ok" d="..." stroke-dasharray="147.124"></path>

如果您愿意，可以使用javascript设置stroke-dasharray值：

ok.setAttributeNS(null, "strokeDasharray", perimeter_ok)

要设置路径动画，您需要将stroke-dashoffset设置为100％（在您的情况下为147.124）到0。

@keyframes progress {
 from {
    stroke-dashoffset: 147.124;
  }
  to{
   stroke-dashoffset: 0;
  }
}

您可能还想先阅读这篇文章：How SVG Line Animation Works

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
  width: 33%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-height: 350px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: .61;
}

.circle {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
 from {
    stroke-dashoffset: 147.124;
  }
  to{
   stroke-dashoffset: 0;
  }
}

.circle-ok {

  stroke: green;
}


.circle-empty {
  stroke: blue;
}

.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

.cb-graph-container{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.chart-text {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.15em;
  text-anchor: middle;
  text-transform: uppercase;
}

<svg class="circular-chart" viewBox="0 0 50 50">
  <path class="circle-bg" d="M18 1
                  a 23.4155 23.4155 0 0 1 0 46.831
                  a 23.4155 23.4155 0 0 1 0 -46.831"></path>
  <path class="circle circle-ok" d="M18 1
                  a 23.4155 23.4155 0 0 1 0 46.831
                  a 23.4155 23.4155 0 0 1 0 -46.831" stroke-dasharray="147.124"></path>
  
  <text class="percentage" x="18" y="26">5.5</text><text class="chart-text" x="18" y="30">Your score</text>
  
</svg>

我怎样才能将svg多个圆圈笔触达到100％？

1 个答案: