Html SVG圆形和长方体阴影动画故障

我试图将ripple/sonar脉冲类型的动画添加到SVG循环中，但它没有任何作用。这里有一把小提琴显示了问题：

在Fiddle中，所需的效果作用于屏幕中心的空div元素，但将相同的CSS动画类应用于SVG循环不会产生任何效果。是否无法设置长方体阴影更改的动画

我确实希望将解决方案作为CSS类的应用程序保留在SVG元素上

谢谢！ 史蒂夫

我无法在没有代码的情况下发布Fiddle链接，因此这是动画所基于的CSS类：

.ripple,.ripple:before,.ripple:after {
  display:block;
  border-radius:2px;
  margin:0 auto;
  width:2px;
  height:2px;
  -webkit-animation:rip 2s infinite;
  -moz-animation:rip 2s infinite;
}
.ripple {
  position:absolute;
  z-index:1000;
  top:10px;
  left:15px;
}
.ripple:before,.ripple:after {
  content:'';
  position:absolute;
}
.ripple:before {-webkit-animation-delay:.1s;-moz-animation-delay:.2s;top:5px;left:0px;}
.ripple:after {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;top:5px;left:0;}
@-webkit-keyframes rip 
{
  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
  5%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 rgba(255,0,0,0.5),
               0 0 0 0 transparent,
               0 0 0 0 rgba(0,0,0,0.1);
  }
  100% {
    box-shadow:0 0 40px 50px transparent,
               0 0 10px 60px transparent,
               0 0 30px 70px transparent,
               0 0 5px 80px transparent;
  }
}
@-moz-keyframes rip 
{
  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
  5%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 rgba(255,0,0,0.5),
               0 0 0 0 transparent,
               0 0 0 0 rgba(0,0,0,0.1);
  }
  100% {
    box-shadow:0 0 10px 75px transparent,
               0 0 20px 75px transparent,
               0 0 30px 75px transparent,
               0 0 40px 75px transparent;
  }
}

---

您的动画不起作用，因为无法在SVG元素（如）上使用CSS伪元素：：before和：：after。它们只适用于HTML元素。

令人遗憾的是，它无法实现，但有时就是这样。我将使用scale合并一个变换。谢谢你的解释！您可以使用SVG动画来实现相同或类似的效果。SVG动画元素在除IE之外的几乎所有浏览器中都能工作。不过，我认为有一个第三方库添加了支持。