svg 元素上的灯光动画

Posted 2023-02-22

【中文标题】svg 元素上的灯光动画

【英文标题】：Light animation on svg elements

【发布时间】：2019-06-20 01:36:55

【问题描述】：

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

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

SVG：

<svg class="pulse-button"   xmlns="http://www.w3.org/2000/svg">
                  <g class="half-circle">>
                    <rect class="rect" x="-1" y="-1"   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- stroke="#000000" fill="#000000"/>
                  </g>
                </svg>

【参考方案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>

【讨论】：

很好，这正是我想要的。 Meaby 使用 svg 并不是最好的方法。