javascript - svg 元素上的光动画

Question

我有这个半圆的 svg。我想围绕这个形状创建一个脉冲光动画。

我弄乱了 css 和 webkit，但我得到的最接近的是父元素周围的脉冲光，而不是实际形状周围的脉冲光。非常感谢您对此有一些见解和想法。

SVG:

<svg class="pulse-button" width="234" height="256" xmlns="http://www.w3.org/2000/svg">
                  <g class="half-circle">>
                    <rect class="rect" x="-1" y="-1" width="236" height="258" id="canvas_background" fill="none"/>
                    <path transform="rotate(-90.53539276123047 116.5,117.59869384765625) " id="svg_6" d="m66,24.098694c55.8011,0 101,41.84254 101,93.5c0,51.65746 -45.1989,93.5 -101,93.5l0,-187z" stroke-linecap="null" stroke-linejoin="null" stroke-width="4" stroke="#000000" fill="#000000"/>
                  </g>
                </svg>

Answer 1

您可以尝试使用纯 CSS 解决方案:

.pulse {
  width:200px;
  height:100px;
  position:relative;
  margin:10px;
}

.pulse::before,
.pulse::after{
   content:"";
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   border-radius:100px 100px 0 0;
   background:#000;
}
.pulse::before {
   background:yellow;
   transform:scale(0.8);
   animation: change 0.8s  infinite alternate; 
   filter:blur(10px);
}
@keyframes change {
  to {
   transform:scale(1.1);
  }
}

<div class="pulse">

</div>