我不明白为什么当我设置animation: dash 10s linear forwards;
时它会在4秒内完成。它是一个错误还是一个“功能”,如果是这样,我怎么能让它持续10秒呢?
.stroke-container {
transform: rotate(270deg);
background: green;
width: 120px;
height: 120px;
}
.stroke-1 {
stroke: red;
animation: dash 10s linear forwards;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.stroke-1-bg {
stroke: blue;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
svg {
fill: none;
stroke-width: 10px;
}
<svg class="stroke-container" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="stroke-1-bg" cx="60" cy="60" r="50"/>
<circle class="stroke-1" cx="60" cy="60" r="50"/>
</svg>
答案 0 :(得分:6)
这是因为您的stroke-dasharray
和stroke-dash-offset
值不等于路径/圆周的长度。
半径为50时,周长为2xπx50,即c315。实际上314.12但315足够接近。
.stroke-container {
transform: rotate(270deg);
background: green;
width: 120px;
height: 120px;
}
.stroke-1 {
stroke: red;
animation: dash 10s linear infinite;
stroke-dasharray: 315;
stroke-dashoffset: 315;
}
.stroke-1-bg {
stroke: blue;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
svg {
fill: none;
stroke-width: 10px;
}
<svg class="stroke-container" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="stroke-1-bg" cx="60" cy="60" r="50" />
<circle class="stroke-1" cx="60" cy="60" r="50" />
</svg>