svg 元素上的灯光动画答案

【问题标题】：Light animation on svg elementssvg 元素上的灯光动画
【发布时间】：2019-06-20 01:36:55
【问题描述】：

我有一个半圆的 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>

【问题讨论】：

标签： javascript html css svg vue.js

【解决方案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 并不是最好的方法。