我看到了这个SVG动画，我想知道如何更改擦除线条的方向；目前，这条线从绘制的最后一点开始缩回，但是我想反过来；以便从第一次开始绘制的点开始擦除线条（以便看上去更像是加载动画）。
我看到.path上的animation属性的值是无穷大，但是我不确定如何指定方向。
HTML是
<div class="bg">
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236">
<path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M343.6 75.9v20.3l23.1 21.8-23.1 21.8v20.3l44.6-42.1zM326.4 139.8l-23.1-21.8 23.1-21.8v-20.3l-44.6 42.1 44.6 42.1z"/>
<path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M335 38.9c-43.7 0-79.1 35.4-79.1 79.1s35.4 79.1 79.1 79.1 79.1-35.4 79.1-79.1-35.4-79.1-79.1-79.1zM335 182.9c-35.8 0-64.9-29.1-64.9-64.9s29.1-64.9 64.9-64.9 64.9 29.1 64.9 64.9-29.1 64.9-64.9 64.9z"/>
</svg>
</div>
CSS是
body {
background-color: #fff;
}
.bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.path {
animation: draw 3.5s infinite;
}
@keyframes draw {
50% {
stroke-dashoffset: 0;
}
}
我喜欢您将其制作为加载动画的想法：
现在我做了什么：
更改了动画的开始停止点
@keyframes draw {
100% {
stroke-dashoffset: -500;
}
}
为什么是-500？
因为这是破折号数组的值。
这在<svg>中定义：dasharray="500"
在最里面的路径中更改了该值。只有300
我添加了线性动画
animation: draw 5s infinite linear;
默认设置为easy。我发现该动画与线性动画具有更好的一致性。
注意
dashoffset=500 <-使动画开始时没有破折号/描边
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句