Question

我有一个带有填充动画的简单的甜甜圈图。问题是我得到两个单独的路径。（例如10％的条形图会给我0-10％，然后是空格，然后再是10％。

我尝试使用不同的变量，但是我不知道自己在做什么错，有什么帮助吗？我已经使用过：https://codepen.io/matttherat/pen/EeMaEw?editors=1100

以下是屏幕：

a busy cat

.svg-item {
  flex: 1;
  font-size: 16px;
  max-width: 120px;
  animation: donutfade 1s;
  margin: 0 auto;
}

.data-des {
  font-size: 0.7em;
  display: block;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

@keyframes donutfade {
  /* this applies to the whole svg item wrapper */
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

.donut-ring-ext {
  stroke: #50b180;
}

.donut-segment {
  transform-origin: center;
}

.donut-segment-2 {
  stroke: #a8df8a;
  animation: donut1 1s;
}

.donut-segment-3 {
  stroke: #a8df8a;
  animation: donut2 1s;
}

.donut-segment-4 {
  stroke: #a8df8a;
  animation: donut3 1s;
}

.donut-percent {
  color: #3c8560;
  animation: donutfadelong 1s;
}

@keyframes donutfadelong {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes donut1 {
  0% {
    stroke-dasharray: 0 100;
  }
  100% {
    stroke-dasharray: 10 90;
  }
}

@keyframes donut2 {
  0% {
    stroke-dasharray: 0, 100;
  }
  100% {
    stroke-dasharray: 20, 80;
  }
}

@keyframes donut3 {
  0% {
    stroke-dasharray: 0, 100;
  }
  100% {
    stroke-dasharray: 50, 50;
  }
}

.donut-label {
  font-size: 0.28em;
  font-weight: 700;
  line-height: 1;
  fill: #000;
  transform: translateY(0.25em);
}

.donut-percent {
  font-size: 0.5em;
  line-height: 1;
  transform: translateY(0.5em);
  font-weight: 100;
}

.donut-data {
  font-size: 0.12em;
  line-height: 1;
  transform: translateY(0.5em);
  text-align: center;
  text-anchor: middle;
  color: #666;
  fill: #666;
  animation: donutfadelong 1s;
}

<div class="svg-item">
  <svg width="100%" height="100%" viewBox="0 0 40 40" class="donut">
                                <circle
                                    class="donut-hole"
                                    cx="20"
                                    cy="20"
                                    r="15.91549430918954"
                                    fill="#fff"
                                ></circle>
                                <circle
                                    class="donut-ring-ext"
                                    cx="20"
                                    cy="20"
                                    r="19"
                                    fill="transparent"
                                    stroke-width="2"
                                ></circle>
                                <circle
                                    class="donut-segment donut-segment-2"
                                    cx="20"
                                    cy="20"
                                    r="22"
                                    fill="transparent"
                                    stroke-width="2"
                                    stroke-dasharray="10 90"
                                    stroke-dashoffset="-5"
                                ></circle>
                                <g class="donut-text donut-text-1">
                                    <text y="50%" transform="translate(0, 2)">
                                        <tspan
                                            x="50%"
                                            text-anchor="middle"
                                            class="donut-percent"
                                        >
                                            10%
                                        </tspan>
                                    </text>
                                </g>
                                <span class="data-des">Amet dolorem sit</span>
                            </svg>
</div>

Answer 1

您需要设置stroke-dashoffset属性的动画。在开始时，dasharay =路径的总长度（用.getTotalLength()计算）。由于您仅使用一个值，因此破折号和间隙的长度相等。

stroke-dasharray="137.35"

还有stroke-dashoffset="137.35"。这意味着您看不到破折号。在这一刻，你的中风才是差距。

接下来，您要对stroke-dashoffset进行动画处理。如果您想看到10％的破折号，需要将stroke-dashoffset的动画从100％设置为90％，即

 100% {
    stroke-dashoffset: 123.6;
  }

希望对您有帮助。

.svg-item {
  flex: 1;
  font-size: 16px;
  max-width: 400px;
  margin: 0 auto;
}

.data-des {
  font-size: 0.7em;
  display: block;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

.donut-ring-ext {
  stroke: #50b180;
}

.donut-segment {
  transform-origin: center;
}

.donut-segment-2 {
  stroke: #a8df8a;
  animation: donut1 1s forwards;
}

.donut-segment-3 {
  stroke: #a8df8a;
  animation: donut2 1s;
}

.donut-segment-4 {
  stroke: #a8df8a;
  animation: donut3 1s;
}

.donut-percent {
  color: #3c8560;
  animation: donutfadelong 1s;
}



@keyframes donut1 {
  100% {
    stroke-dashoffset: 123.6;
  }
}


.donut-label {
  font-size: 0.28em;
  font-weight: 700;
  line-height: 1;
  fill: #000;
  transform: translateY(0.25em);
}

.donut-percent {
  font-size: 0.5em;
  line-height: 1;
  transform: translateY(0.5em);
  font-weight: 100;
}

.donut-data {
  font-size: 0.12em;
  line-height: 1;
  transform: translateY(0.5em);
  text-align: center;
  text-anchor: middle;
  color: #666;
  fill: #666;
  animation: donutfadelong 1s;
}

svg{border:1px solid}

<div class="svg-item">
  <svg viewBox="-30 -10 100 100" class="donut">
  <g transform="rotate(-90 20 20)">
                                <circle
                                    class="donut-hole"
                                    cx="20"
                                    cy="20"
                                    r="15.91549430918954"
                                    fill="#f00"
                                ></circle>
                                <circle
                                    class="donut-ring-ext"
                                    cx="20"
                                    cy="20"
                                    r="19"
                                    fill="transparent"
                                    stroke-width="2"
                                ></circle>
                                <circle 
                                    class="donut-segment donut-segment-2"
                                    cx="20"
                                    cy="20"
                                    r="22"
                                    fill="transparent"
                                    stroke-width="2"
                                    stroke-dasharray="137.35"
                                    stroke-dashoffset="137.35"
                                ></circle></g>
                                <g class="donut-text donut-text-1">
                                    <text y="50%" transform="translate(0, 2)">
                                        <tspan
                                            x="50%"
                                            text-anchor="middle"
                                            class="donut-percent"
                                        >
                                            10%
                                        </tspan>
                                    </text>
                                </g>
                                <span class="data-des">Amet dolorem sit</span>
                            </svg>
</div>

带有多个原点的SVG圆用于笔画动画

1 个答案: