问题描述
我正在尝试将以下动画应用于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);
}
}
更改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对圆形标签/元素的波纹效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!