svg sich allmählich ausbreitende Wirkung auf den Kreis tag/Element

Question

Ich versuche, die folgende Animation zu einem svg Kreis Element anwenden:

$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

das div zu einem Kreis ändern hat nicht funktioniert, wie erwartet .

Im obigen Codepen wurde ein div-Element verwendet, aber kann ich den gleichen Effekt auf ein SVG-Kreiselement anwenden?

Vielen Dank im Voraus.

Answer 1

Sie müssen einen Stapel Kreise anstelle von Schatten verwenden. Der Radius eines <circle> ist nicht CSS-animierbar, daher müssen Sie als Workaround eine Skalierungsumwandlung verwenden. (A SMIL Animation konnte auf dem Radius arbeiten, aber nicht mit Microsoft-Browsern kompatibel sein.)

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>