Html 将CSS嵌入SVG创建脉动圆

有没有办法将此Codepen CSS嵌入到SVG中，以创建独立的SVG文件（即图标）？基本上将整个Codepen代码转换为一个.svg文件

根据，可以在

中使用

元素

另一方面，请注意，您的代码笔位于SCSS中，而不是CSS中

下面是我快速将代码转换为CSS的示例：

/*  */

Its。我试过这个，但不起作用。如果您尝试代码笔上的代码，这将非常有用。谢谢。正如我所说，Codepen中的代码是SCSS，而不是CSS，您必须将其转换为CSS。@MBenmos我编辑了我的答案，并将您的代码转换为CSS。是的，我尝试将其作为独立的svg文件（svg中的CSS），但它不起作用。

<div class="pulse-container">
  <div class="pulse-box">
    <svg class="pulse-svg" width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <circle class="circle first-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
     <circle class="circle second-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
     <circle class="circle third-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
     <circle class="circle" fill="#FF6347" cx="25" cy="25" r="25"> </circle>
    </svg>
   </div>
 </div>