Question

我正在尝试根据数据值为svg圈子stroke-dasharray制作动画而不使用库。

数据来自javascript计算，因此笔画的长度将不同于圆圈。

代码如下：Codepen

或

＆＃13;

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;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 1

如果我理解正确，你想要一个使用SVG圈子而没有库的饼图。我最近做过类似的事情，这是我制作的混音：

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

希望它有所帮助。

stroke-dasharray没有库的可视化数据

1 个答案: