html - SVG Circle 和 box-shadow 动画问题

Question

我正在尝试向 SVG 圆圈添加波纹/声纳脉冲类型的动画，但它没有执行任何操作。这是一个显示问题的 fiddle :http://jsfiddle.net/scole/ono0awyw/

在 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;
  }
}

Answer 1

您的动画无法正常工作，因为您不能在 ::before 等 SVG 元素上使用 CSS 伪元素(::after 和 <circle>) .它们旨在仅应用于 HTML 元素。