Css svg对圆形标记/元素的涟漪效应

我尝试将以下动画应用于svg圆形元素：

$color: #65ff78;

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #4e4e4e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-ripple {
  background-color: #35ffc3;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  animation: ripple 0.7s linear infinite;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba($color, 0.3),
                0 0 0 1em rgba($color, 0.3),
                0 0 0 3em rgba($color, 0.3),
                0 0 0 5em rgba($color, 0.3);
  }
  100% {
    box-shadow: 0 0 0 1em rgba($color, 0.3),
                0 0 0 3em rgba($color, 0.3),
                0 0 0 5em rgba($color, 0.3),
                0 0 0 8em rgba($color, 0);
  }
}

如预期的那样，将div更改为圆形无效

在上面的codepen中使用了div元素，但是我可以对svg circle元素应用相同的效果吗

---

提前谢谢。

你必须使用一堆圆圈而不是阴影。

的半径不是CSS动画，因此作为一种解决方法，您必须使用缩放变换。（SMIL动画可以在radius上工作，但与Microsoft浏览器不兼容。）

rect{
填充：#4e4e；
}
圈{
填充：65ff78；
不透明度：0.3；
}
svg>圆圈：最后一个孩子{
填充：#35ffc3；
不透明度：1；
}
#rp1{
动画：涟漪1 0.7s线性无限；
}
@关键帧涟漪1{
0% {
转换：比例（5.5）；
不透明度：0.3；
}
100% {
转换：比例（8.5）；
不透明度：0.0；
}
}
#rp2{
动画：涟漪2 0.7s线性无限；
}
@关键帧2{
0% {
转换：比例（3.5）；
}
100% {
转换：比例（5.5）；
}
}
#rp3{
动画：涟漪3 0.7s线性无限；
}
@关键帧涟漪3{
0% {
转换：比例（1.5）；
}
100% {
转换：比例（3.5）；
}
}
#rp4{
动画：ripple4 0.7s线性无限；
}
@关键帧4{
0% {
变换：比例（0.5）；
}
100% {
转换：比例（1.5）；
}
}

---

你将不得不使用一堆圆圈而不是阴影。

的半径不是CSS动画，因此作为一种解决方法，您必须使用缩放变换。（SMIL动画可以在radius上工作，但与Microsoft浏览器不兼容。）

rect{
填充：#4e4e；
}
圈{
填充：65ff78；
不透明度：0.3；
}
svg>圆圈：最后一个孩子{
填充：#35ffc3；
不透明度：1；
}
#rp1{
动画：涟漪1 0.7s线性无限；
}
@关键帧涟漪1{
0% {
转换：比例（5.5）；
不透明度：0.3；
}
100% {
转换：比例（8.5）；
不透明度：0.0；
}
}
#rp2{
动画：涟漪2 0.7s线性无限；
}
@关键帧2{
0% {
转换：比例（3.5）；
}
100% {
转换：比例（5.5）；
}
}
#rp3{
动画：涟漪3 0.7s线性无限；
}
@关键帧涟漪3{
0% {
转换：比例（1.5）；
}
100% {
转换：比例（3.5）；
}
}
#rp4{
动画：ripple4 0.7s线性无限；
}
@关键帧4{
0% {
变换：比例（0.5）；
}
100% {
转换：比例（1.5）；
}
}

---

以下是参考

---

以下是参考

box shadow不是对SVG元素有任何影响的CSS属性。CSS过滤器可能会更好地工作，这取决于您想要实现什么。box-shadow不是对SVG元素有任何影响的CSS属性。CSS过滤器可能会更好地工作，这取决于您想要实现什么。