笔划破折号数组到没有库的可视数据

Question

我正在尝试基于数据值对svg圆的stroke-dasharray进行动画stroke-dasharray ，而无需使用库。

数据来自javascript计算，因此笔划的长度在圆与圆之间会有所不同。

代码如下： Codepen

要么

 var circle_1 = 20, circle_2 = 33, circle_3 = 42; document.getElementById('circle_1').innerHTML = circle_1; document.getElementById('circle_2').innerHTML = circle_2; document.getElementById('circle_3').innerHTML = circle_3; 

 .container { text-align: center; height: 200px; } li { list-style: none; display: inline-block; margin: 100px 50px; position: relative; width: 100px; height: 100px; } circle { stroke: #222; fill: transparent; stroke-width: 3px } .result { position: absolute; top: 40%; left: 40%; } 

 <div class="container"> <li> <svg width="100" height="100"> <circle cy="50" cx="50" r="40" stroke-dasharray="0em" stroke-dashoffset="0" /> </svg> <div class="result" id="circle_1"></div> </li> <li> <svg width="100" height="100"> <circle cy="50" cx="50" r="40" stroke-dasharray="0em" stroke-dashoffset="0" /> </svg> <div class="result" id="circle_2"></div> </li> <li> <svg width="100" height="100"> <circle cy="50" cx="50" r="40" stroke-dasharray="0em" stroke-dashoffset="0" /> </svg> <div class="result" id="circle_3"></div> </li> </div> 

Answer 1

如果我对您的理解正确，则希望使用不带库的SVG圆形饼图。 我最近在做类似的事情，这是我做的一个mixin：

http://codepen.io/Draccoz/pen/GJVJVM

=pie-chart($size, $ring-size, $ring-color: false, $bg-size: 0, $bg-color: transparent)
  $d: $size - $ring-size

  width: $size
  height: $size
  >
  circle
    cx: $size / 2
    cy: $size / 2

    &:nth-child(1)
      r: $bg-size / 2
      @if $bg-color
        fill: $bg-color

    &:nth-child(2)
      font-size: $d * 1.01 * $PI
      stroke-width: $ring-size
      r: $d / 2
      fill: transparent
      @if $ring-color
        stroke: $ring-color
      /* stroke-linecap: round */
      transition: stroke-dashoffset 1s ease-in-out
      transform: translateY($size) rotate(-90deg)
      stroke-dasharray: 1em 1em
      stroke-dashoffset: 0
      @content

希望能帮助到你。