Question

Heyo！

因此，我有大量的内联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，但事实并非如此。 / p>

任何帮助将不胜感激

Answer 1

对不起，我在清理CSS时不小心删除了line-anim关键帧，感谢您提醒我@enxaneta

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

1 个答案: