svg 對圓標記/元素的漣漪效應

Question

我正在嘗試將以下動畫應用於 svg circle 元素：

$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

正如預期的那樣，將 div 更改為圓形不起作用。

在上面的 codepen 中使用了 div 元素，但是我可以將相同的效果應用於 svg circle 元素嗎？

提前致謝。

Answer 1

您必須使用一堆圓圈而不是陰影。 <circle>的半徑不是 CSS 動畫的，因此作為一種解決方法，您必須使用縮放轉換。 （SMIL 動畫可以在半徑上工作，但與 Microsoft 瀏覽器不兼容。）

 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>

Answer 2

這是參考https://loading.io/spinner/ripple/-ripple-circle-scale-round-radar-radio的實現

 <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="281px" height="281px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> <defs> <g id="ripple-circle"> <circle r="5" fill="none" stroke="#e92d2d" stroke-width="3"> <animate attributeName="r" repeatCount="indefinite" dur="1.5873015873015872s" values="0;15" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="0s" ></animate> <animate attributeName="opacity" repeatCount="indefinite" dur="1.5873015873015872s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="0s" ></animate> </circle> <circle r="5" fill="none" stroke="#e92d2d" stroke-width="3"> <animate attributeName="r" repeatCount="indefinite" dur="1.5873015873015872s" values="0;15" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.7936507936507936s" ></animate> <animate attributeName="opacity" repeatCount="indefinite" dur="1.5873015873015872s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.7936507936507936s" ></animate> </circle> </g> </defs> <use xlink:href="#ripple-circle" x="50" y="30" /> <circle cx="50" cy="30" r="4" fill="#E92D2D" className="pointing-circle" /> </svg>