内联SVG并不总是显示在Chrome中

Question

哈哈！

所以我有一大块内联SVG代码，所以我可以用一些css来动画它，我已经把SVG内联代码放在一个pastebin中，如果我把它放在这里，它将是巨大的。现在的问题是，它没有在Chrome中显示出来。对应的SCSS：

#logo {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  stroke-linecap: square;
  z-index: 1;
}

#logo path {
  &:nth-child(1) {
    stroke-dasharray: 500.82;
    stroke-dashoffset: 500.92;
    animation: line-anim 1.5s ease forwards;
  }

  &:nth-child(2) {
    stroke-dasharray: 313.24163818359375;
    stroke-dashoffset: 313.24163818359375;
    animation: line-anim 1.5s ease forwards 0.3s;
  }

  &:nth-child(3) {
    stroke-dasharray: 350.793212890625;
    stroke-dashoffset: 350.793212890625;
    animation: line-anim 1.5s ease forwards 0.6s;
  }

  &:nth-child(4) {
    stroke-dasharray: 327.3361511230469;
    stroke-dashoffset: 327.3361511230469;
    animation: line-anim 1.5s ease forwards 0.9s;
  }

  &:nth-child(5) {
    stroke-dasharray: 282.18719482421875;
    stroke-dashoffset: 282.18719482421875;
    animation: line-anim 1.5s ease forwards 1.2s;
  }

  &:nth-child(6) {
    stroke-dasharray: 313.2420959472656;
    stroke-dashoffset: 313.2420959472656;
    animation: line-anim 1.5s ease forwards 1.5s;
  }

  &:nth-child(7) {
    stroke-dasharray: 386.1973876953125;
    stroke-dashoffset: 386.1973876953125;
    animation: line-anim 1.5s ease forwards 1.8s;
  }

  &:nth-child(8) {
    stroke-dasharray: 365.17633056640625;
    stroke-dashoffset: 365.17633056640625;
    animation: line-anim 1.5s ease forwards 2.1s;
  }

  &:nth-child(9) {
    stroke-dasharray: 296.4239501953125;
    stroke-dashoffset: 296.4239501953125;
    animation: line-anim 1.5s ease forwards 2.4s;
  }

  &:nth-child(10) {
    stroke-dasharray: 350.7937316894531;
    stroke-dashoffset: 350.7937316894531;
    animation: line-anim 1.5s ease forwards 2.7s;
  }

  &:nth-child(11) {
    stroke-dasharray: 365.1751708984375;
    stroke-dashoffset: 365.1751708984375;
    animation: line-anim 1.5s ease forwards 3s;
  }

  &:nth-child(12) {
    stroke-dasharray: 313.2421875;
    stroke-dashoffset: 313.2421875;
    animation: line-anim 1.5s ease forwards 3.3s;
  }

  &:nth-child(13) {
    stroke-dasharray: 482.3141174316406;
    stroke-dashoffset: 482.3141174316406;
    animation: line-anim 1.5s ease forwards 3.6s;
  }
}

我已经在Edge上试过了，它确实显示出来了，但非常奇怪。在FireFox上根本没有显示，昨天一切正常，现在我在项目中走得更远了，我以为这是我后来添加的一些SCSS，但事实也不是这样。

任何帮助都将不胜感激

Answer 1

我太傻了，我在清理css的时候不小心删除了line-anim关键帧，谢谢你提醒我@enxaneta