SVG警报CSS动画

我试图在SVG动画中复制此警报

以下是我所创造的：

svg{
高度：200px；
}
#警报器{
动画：flash 1s线性无限；
}
#第1行、第2行、第3行{
行程数组：10；
动画：直线破折号1s向前无限；
}
@关键帧线划线{
0% {
行程偏移：46；
}
100% {
笔划偏移：0；
}
}
@关键帧闪烁{
到{
填充物：白色；
}
}

警报器

我想你会喜欢这个：

svg{
高度：200px；
}
#警报器{
动画：彩色闪光灯1s线性无限；
}
#第1行、第2行、第3行{
行程数组：10；
动画：直线破折号1s向前无限；
}
@关键帧线划线{
0% {
行程偏移：46；
}
100% {
笔划偏移：0；
}
}
@关键帧闪烁{
到{
填充物：白色；
}
}
@关键帧颜色闪烁{
0% {
填充物：白色；
}
50% {
填充物：红色；
}
100% {
填充物：黄色；
}
}

警报器

具有一个类似于您的值的破折号数组

stroke-dasharray: 10;

实际上是一种快捷方式：

stroke-dasharray: 10 10;

这意味着破折号图案由长度为10的破折号和长度为10的间隙组成。然后重复破折号10、间隙10、破折号10、间隙10等

如果您想要一个短划线，然后是一个大间距，则需要在划线图案中添加适当的间距值。例如：

stroke-dasharray: 10 40;

svg{
高度：200px；
}
#警报器{
动画：flash 1s线性无限；
}
#第1行、第2行、第3行{
行程：10-40；
动画：直线破折号1s向前无限；
}
@关键帧线划线{
0% {
行程偏移：46；
}
100% {
笔划偏移：0；
}
}
@关键帧闪烁{
到{
填充物：白色；
}
}

警报器

谢谢。尽管警报器发出的动画（虚线/线条）不正确。应该只有一个，非常感谢！这正是我想要的答案！