svg对圆形标签/元素的波纹效果 [英] svg ripple effect to the circle tag/element

问题描述

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

  $ color：＃65ff78; 
 
 html，正文{
宽度：100％； 
身高：100％； 
} 
 
 body {
 background-color：＃4e4e4e; 
显示：flex; 
 align-items：center; 
 justify-content：center; 
} 
 
 .circle-ripple {
 background-color：＃35ffc3; 
宽度：1em； 
高度：1em； 
边界半径：50％； 
动画：涟漪0.7s线性无限； 
} 
 
 @keyframes波纹{
 0％{
框阴影：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）; 
} 
} 
  

https://codepen.io/FabienMotte/pen/gPKVxE

更改div

在上面的代码笔中使用了div元素，但是我可以对svg圈子元素应用相同的效果吗？ / p>

预先感谢。

解决方案

您必须使用一叠圆圈，而不是阴影。 < circle> 的半径无法CSS设置动画，因此要解决此问题，您必须使用比例转换。 （SMIL动画可以在半径上工作，但与Microsoft浏览器不兼容。）

  rect {填充：＃4e4e4e;}圆圈{填充：＃65ff78;透明度：0.3;} svg> circle：last-child {填充：＃35ffc3;透明度：1；}＃rp1 {动画：ripple1 0.7s线性无限；} @关键帧涟漪1 {0％{转换：scale（5.5）;不透明度：0.3; } 100％{transform：scale（8.5）;不透明度：0.0; }}＃rp2 {动画：涟漪2 0.7s线性无限；} @关键帧涟漪2 {0％{变换：scale（3.5）; } 100％{transform：scale（5.5）; }}＃rp3 {动画：涟漪3 0.7s线性无限；} @关键帧涟漪3 {0％{变换：scale（1.5）; } 100％{transform：scale（3.5）; }}＃rp4 {动画：涟漪4 0.7s线性无限；} @关键帧涟漪4 {0％{变换：scale（0.5）; } 100％{transform：scale（1.5）; }}  

 < svg xmlns = http：// www.w3.org/2000/svg height = 100％ width = 100％< defs> < g id = anims> < circle id = rp1 r = 1em /> < circle id = rp2 r = 1em /> < circle id = rp3 r = 1em /> < circle id = rp4 r = 1em /> < / g>< / defs>< rect height = 100％ width = 100％ /><使用xlink：href =＃anims x = 50％ y = 50％  /><圆r = 0.5em cx = 50％ cy = 50％ />< / svg>  

I am trying to apply the following animation to an svg circle element:

$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);
  }
}

https://codepen.io/FabienMotte/pen/gPKVxE

Changing the div to a circle did not work, as expected.

In the above codepen a div element has been used, but can I apply the same effect to an svg circle element?

Thanks in advance.

解决方案

You'll have to use a stack of circles instead of shadows. The radius of a <circle> is not CSS-animatable, so as a workaround you'll have to use a scale transformation. (A SMIL animation could work on the radius, but would not be compatible with Microsoft browsers.)

rect {
  fill: #4e4e4e;
}
circle {
  fill: #65ff78;
  opacity: 0.3;
}
svg > circle:last-child {
  fill: #35ffc3;
  opacity: 1;
}
#rp1 {
  animation: ripple1 0.7s linear infinite;
}
@keyframes ripple1 {
  0% {
    transform: scale(5.5);
    opacity: 0.3;
  }
  100% {
    transform: scale(8.5);
    opacity: 0.0;
  }
}
#rp2 {
  animation: ripple2 0.7s linear infinite;
}
@keyframes ripple2 {
  0% {
    transform: scale(3.5);
  }
  100% {
    transform: scale(5.5);
  }
}
#rp3 {
  animation: ripple3 0.7s linear infinite;
}
@keyframes ripple3 {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(3.5);
  }
}
#rp4 {
  animation: ripple4 0.7s linear infinite;
}
@keyframes ripple4 {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1.5);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
<defs>
  <g id="anims">
    <circle id="rp1" r="1em" />
    <circle id="rp2" r="1em" />
    <circle id="rp3" r="1em" />
    <circle id="rp4" r="1em" />
  </g>
</defs>
<rect height="100%" width="100%" />
<use xlink:href="#anims" x="50%" y="50%"/>
<circle r="0.5em" cx="50%" cy="50%" />
</svg>

这篇关于svg对圆形标签/元素的波纹效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！