CSS动画径向图在动画SVG后溢出

Question

我在使用css混乱函数时遇到了一个问题。"；前面的"；在动画完成后将剪辑圈起来；启动"；在动画的原点。动画完成后，填充的笔划将剪辑回原点。有人能帮我吗？我已经试着阅读SVG元素，并且已经摆弄了几个小时的代码，但我仍然无法使它正确地动画化。

非常感谢您的支持。这是我正在使用的代码。

.radial-graph-container {
display: flex;
justify-content: center;
flex-direction: column;
padding-bottom: 2.4rem;
}
.radial-graph-container .chart-container .back {
stroke: #101114;
stroke-width: 10;
}
.radial-graph-container .chart-container .front {
stroke: #94d82d;
stroke-width: 15;
stroke-dasharray: 210;
/* Works fine with values above 300 */
transform: rotate(-90deg);
transform-origin: center;
}
.front {
animation: fill 1s reverse;
}

<div class="radial-graph-container">
<svg width="200" height="200" class="chart-container">
<circle cx="100" cy="100" r="90" class="back" fill="none" />
<circle cx="100" cy="100" r="90" class="front" fill="none" />
<g class="graph-center-txt">
<text
x="100"
y="100"
alignment-baseline="central"
text-anchor="middle"
id="percentage-social-media-usage"
>
42%
</text>
</g>
</svg>
<p class="graph-info-txt">
Description Text Here
</p>
</div>

Answer 1

您的动画部分丢失：(@keyframes部分(

.radial-graph-container {
display: flex;
justify-content: center;
flex-direction: column;
padding-bottom: 2.4rem;
}
.radial-graph-container .chart-container .back {
stroke: #101114;
stroke-width: 10;
}
.radial-graph-container .chart-container .front {
stroke: #94d82d;
stroke-width: 15;
stroke-dasharray: 210;
/* Works fine with values above 300 */
transform: rotate(-90deg);
transform-origin: center;
}
.front {
animation: fill 1s reverse;
}
@keyframes fill {
0% {
r: 90;
}
100% {
r: 0;
}
}

<div class="radial-graph-container">
<svg width="200" height="200" class="chart-container">
<circle cx="100" cy="100" r="90" class="back" fill="none" />
<circle cx="100" cy="100" r="90" class="front" fill="none" />
<g class="graph-center-txt">
<text
x="100"
y="100"
alignment-baseline="central"
text-anchor="middle"
id="percentage-social-media-usage"
>
42%
</text>
</g>
</svg>
<p class="graph-info-txt">
Description Text Here
</p>
</div>