Javascript CSS中的SVG动画

我正在尝试使用以下svg在CSS中创建动画。因此，我尝试将蓝色条加载到屏幕单词上，并在之后显示第二个svg“大小视图”

我试着玩短跑偏置短跑阵列，但运气不好，似乎什么都没变。我做错了什么有什么帮助吗？代码如下

我试图复制这个示例：但是使用我的字体和svg

var shape=document.querySelector（“.fill3”）；
var shapeLength=shape.getTotalLength（）；
console.log（形状长度）

正文{
背景色：黑色；
}
.填充{
动画：显示12秒线性；
}
#封面2{
动画：显示2秒线性向前；
动画延迟：2秒
}
/*@keyframes reveal1{
0%{stroke dashoffset:-558；}
100%{stroke dashoffset:558；}
}
@关键帧显示2{
0%{stroke dashoffset:0；}
100%{stroke dashoffset:-80；}
} */
.fill3{
笔划数组：1；
行程偏移量：1000；
}

如前所述，使用

path

、

stroke-dasharray

和动画

stroke-dashoffset

制作动画只是可能的选择之一（我个人喜欢这种方法）

正如这里的评论中所建议的，使用

笔划dasharray

和

笔划dashoffset

制作动画需要一些

笔划

。如果要使用此技术，请将“覆盖”路径（例如，原始示例中带有

class=“fill”

的

路径

设置为直线，而不是闭合轮廓形成矩形。视觉效果是一样的，但背后的语义和形状（以及你如何使用或不能使用它们）是非常不同的

工作代码：

身体{
背景色：黑色；
}
#封面1{
动画：显示2秒线性向前；
}
#封面2{
动画：显示2秒线性向前；
动画延迟：2秒
}
@关键帧显示1{
0%{stroke dashoffset:1000；}/*stroke dasharray的值*/
100%{stroke dashoffset:772；}/*1000-228；228=320-92=线的长度*/
}
@关键帧显示2{
0%{stroke dashoffset:0；}
100%{stroke dashoffset:-256；}/*256=行的长度=第二个svg的长度*/
}

所有路径都没有

笔划

值，因此

笔划dasharray

和

笔划偏移

不会起任何作用。我不理解你想要的结果。你能更详细地重新定义你的问题吗？显然，我不是唯一一个不理解你的问题的人，它在我看来真的很糟糕。请更详细地阐述你的问题。我刚刚更新了我试图获得的结果，但我想得到一个更详细的答案，关于如何做，以便学习