Animation HTML中的SVG不'；行不通

请参阅中的代码

---

它工作得非常好。但是当我自己尝试的时候。加载的图像出现了，但没有动画。

我不确定为什么，但是添加

是有效的。（我猜是一个代码笔“-webkit-”polyfill）

希望这有帮助

正文{
背景#fd0；
}
#包装纸{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.路径{
笔划阵列：2000；
笔划偏移：0；
动画：直线无限；
}
@关键帧破折号{
0% {
行程偏移量：2000；
}
90% {
笔划偏移：0；
}
}
.path2{
笔划阵列：1000；
行程偏移量：1000；
动画：dash2 5s线性无限；
}
@关键帧dash2{
60% {
行程偏移量：1000；
}
100% {
笔划偏移：0；
}
}

---

附带的CSS仅适用于某些浏览器。基于Webkit的浏览器仍然要求您在CSS动画属性上使用

-Webkit-

前缀。即

-webkit-animation
@-webkit-keyframes

如果您添加了这些CSS规则的“-webkit-”变体，一切都会正常工作。见下文

它在codepen上工作的原因是因为codepen似乎包含了一个脚本，可以纠正浏览器之间的差异

正文{
背景#fd0；
}
#包装纸{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.路径{
笔划阵列：2000；
笔划偏移：0；
-webkit动画：dash 5s线性无限；
动画：直线无限；
}
@关键帧破折号{
0% {
行程偏移量：2000；
}
90% {
笔划偏移：0；
}
}
@-webkit关键帧{
0% {
行程偏移量：2000；
}
90% {
笔划偏移：0；
}
}
.path2{
笔划阵列：1000；
行程偏移量：1000；
-webkit动画：dash2 5s线性无限；
动画：dash2 5s线性无限；
}
@关键帧dash2{
60% {
行程偏移量：1000；
}
100% {
笔划偏移：0；
}
}
@-webkit关键帧dash2{
60% {
行程偏移量：1000；
}
100% {
笔划偏移：0；
}
}

您是否也在使用该代码笔中提供的css？您必须将css插入与svg相同的文件中，或参考单独的css文件。请确保你做到了，我已经做到了，我把css和svg放在同一个页面上，我尝试链接css，但是没有发生任何事情。你发布的代码片段实际上是不完整的。再次仔细查看代码笔中的html部分。您是指svg的结束标记吗？

-webkit-animation
@-webkit-keyframes