我正在尝试使用scss和html制作3个圆形图表
我已经在JS Fiddle中发布了实际的scss和html，但是为了让您预览，下面有一个编译版本。
问题是，当中间图表(.circle2)的半径值为50时，它可以正常工作，但当动画开始时为40时，一个奇怪的尾随动画开始了，你知道为什么吗?我猜更像是一个数学问题。
JS小提琴
.body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#svg .circle {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
fill: none;
stroke: coral;
stroke-width: 10px;
stroke-dasharray: 113.09734 188.49556;
stroke-linecap: round;
-webkit-animation: circleinchart 2s ease-in-out;
animation: circleinchart 2s ease-in-out;
}
@-webkit-keyframes circleinchart {
0% {
stroke-dasharray: 0 188.49556;
}
}
@keyframes circleinchart {
0% {
stroke-dasharray: 0 188.49556;
}
}
#svg .circle2 {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
fill: none;
stroke: #b530c9;
stroke-width: 10px;
stroke-dasharray: 157.07963 314.15927;
stroke-linecap: round;
-webkit-animation: circleinchart 2s ease-in-out;
animation: circleinchart 2s ease-in-out;
}
@keyframes circleinchart {
0% {
stroke-dasharray: 0 314.15927;
}
}
#svg .circle3 {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
fill: none;
stroke: #59e629;
stroke-width: 10px;
stroke-dasharray: 62.83185 251.32741;
stroke-linecap: round;
-webkit-animation: circleinchart 2s ease-in-out;
animation: circleinchart 2s ease-in-out;
}
@keyframes circleinchart {
0% {
stroke-dasharray: 0 251.32741;
}
}
/* This is the css compiled version of the scss*/
/*# sourceMappingURL=style.css.map */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Chart</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="body">
<svg id="svg" height="100" width="100">
<circle class="circle" cx = "50" cy = "50" r="30"/>
</svg>
<svg id="svg" height="200" width="200">
<circle class="circle2" cx="100" cy="100" r="50" />
</svg>
<svg id="svg" height="200" width="200">
<circle class="circle3" cx="100" cy="100" r="40" />
</svg>
</body>
</html>似乎由于某种原因，stroke-dasharray中的第二个$circumference参数不够高。你的数学似乎很合理，但当我在0%关键帧和目标中增加两倍的周长时，它似乎不再给出错误。
这个解决方案是可能的，因为stroke-dasharray的第二个参数提供了应该存在的空白空间的数量，并且这个溢出没有问题。
我不能确定，但我认为问题是第二个参数也是动画的，在某个点将值更改到所需值以下。
回复JS提琴
.body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#svg .circle {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
fill: none;
stroke: coral;
stroke-width: 10px;
stroke-dasharray: 113.09734 377;
stroke-linecap: round;
-webkit-animation: circleinchart 2s ease-in-out;
animation: circleinchart 2s ease-in-out;
}
@-webkit-keyframes circleinchart {
0% {
stroke-dasharray: 0 376;
}
}
@keyframes circleinchart {
0% {
stroke-dasharray: 0 376;
}
}
#svg .circle2 {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
fill: none;
stroke: #b530c9;
stroke-width: 10px;
stroke-dasharray: 157.07963 628;
stroke-linecap: round;
-webkit-animation: circleinchart 2s ease-in-out;
animation: circleinchart 2s ease-in-out;
}
@keyframes circleinchart {
0% {
stroke-dasharray: 0 628;
}
}
#svg .circle3 {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
fill: none;
stroke: #59e629;
stroke-width: 10px;
stroke-dasharray: 62.83185 502;
stroke-linecap: round;
-webkit-animation: circleinchart 2s ease-in-out;
animation: circleinchart 2s ease-in-out;
}
@keyframes circleinchart {
0% {
stroke-dasharray: 0 502;
}
}
/* This is the css compiled version of the scss*/
/*# sourceMappingURL=style.css.map */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Chart</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="body">
<svg id="svg" height="100" width="100">
<circle class="circle" cx = "50" cy = "50" r="30"/>
</svg>
<svg id="svg" height="200" width="200">
<circle class="circle2" cx="100" cy="100" r="50" />
</svg>
<svg id="svg" height="200" width="200">
<circle class="circle3" cx="100" cy="100" r="40" />
</svg>
</body>
</html>