將CSS嵌入SVG以創建脈動圓

Question

有沒有辦法將此Codepen CSS嵌入到SVG中以創建獨立的SVG文件（即圖標）？ 基本上將整個Codepen代碼轉換為1個.svg文件

這是指向Codepen的鏈接

<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>

Answer 1

根據文檔 ，您可以在<svg>使用<style>元素。

另一方面，請注意您的Codepen在SCSS中 ，而不在CSS中 。

這是一個示例，其中我將您的代碼快速轉換為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"> <style> /* <![CDATA[ */ .pulse-box { float: left; width: 50%; height: 250px; display: flex; justify-content: center; align-items: center; } /* pulse in SVG */ svg.pulse-svg { overflow: visible; } svg.pulse-svg .first-circle { fill: #f00; transform: scale(0.5); transform-origin: center center; animation: pulse-me 3s linear infinite; } svg.pulse-svg .second-circle { fill: #f00; transform: scale(0.5); transform-origin: center center; animation: pulse-me 3s linear infinite; animation-delay: 1s; } svg.pulse-svg .third-circle { fill: #f00; transform: scale(0.5); transform-origin: center center; animation: pulse-me 3s linear infinite; animation-delay: 2s; } /* pulse in CSS */ .pulse-css { width: 30px; height: 30px; border-radius: 15px; background: tomato; position: relative; } .pulse-css:before, .pulse-css:after { content: ""; width: 30px; height: 30px; border-radius: 15px; background-color: tomato; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; transform: scale(0.5); transform-origin: center center; animation: pulse-me 3s linear infinite; } .pulse-css:after { animation-delay: 2s; } @keyframes pulse-me { 0% { transform: scale(0.5); opacity: 0; } 50% { opacity: 0.1; } 70% { opacity: 0.09; } 100% { transform: scale(5); opacity: 0; } } /* ]]> */ </style> <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>