css - 用于笔划动画的具有多个原点的 SVG 圆

Question

我有一个带有填充动画的简单圆环图。问题是我有两条独立的路径。 (Es. 10% 栏给我 0-10%，然后是空间，然后是另外 10%。

我试过使用不同的变量，但我无法弄清楚我做错了什么，有什么帮助吗？我用过这个:https://codepen.io/matttherat/pen/EeMaEw?editors=1100

这是一个屏幕:

.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 属性设置动画。一开始 stroke-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>