svgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。
<body> <svg class="likeButton" width="500px" height="500px" viewBox="0 0 500 500"> <circle class="explosion" r="150" cx="250" cy="250"></circle> <g class="particleLayer"> <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/> <circle fill="#8CE8C3" cx="411" cy="313.5" r="12.5"/> <circle fill="#91D2FA" cx="279" cy="86.5" r="12.5"/> <circle fill="#91D2FA" cx="155" cy="390.5" r="12.5"/>
ただこのやり方だとbody内のソースの可読性が著しく下がってしまうので、svgタグ部分を外部ファイル化しajaxを使って非同期通信で読み込む方式に変更します。
ajaxで読み込めばbody内のソースも整理され、なおかつインラインの時と同じようにcssでsvgをコントロールする事が出来ます。
<body> <div id="box"> <!--ここ外部svgデータが挿入--> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $.ajax({ url: 'logo.svg',//ここにsvgファイルのパスを入れる }) .then( // 1つめは通信成功時の処理 function(data){ var svg = $(data).find('svg'); $('#box').append(svg); }, // 2つめは通信失敗時の処理 function(){ alert('読み込み失敗'); }); </script> </body>
Fetch APIを使ってsvgを呼び出す
JavaScriptの次世代の非同期通信の規格であるFetch APIを使用する事で、jqueryを使わずに非同期通信が行えるようになります。
フェッチ 【 fetch 】とは
ソフトウェアやネットワーク通信の分野では、データなどの受信側・需要側が(送信側・供給側から送られてくるのを待つのではなく)能動的に読み出しに行く、相手に送信するよう要求する、といった意味合いでフェッチという用語が用いられる。特に、送信側が能動的に送り出す「プッシュ」(push)方式と対比して、一定時間ごとに受信すべきデータの有無を繰り返し確認する受信側の動作を指す場合があり、「ポーリング」(polling)とも呼ばれる。
マイクロプロセッサ(CPU/MPU)では、命令を実行する最初の段階で、命令コード(インストラクション)をメインメモリ(またはキャッシュメモリ)から読み出し、プロセッサ内部のレジスタに転送する動作のことをフェッチという。フェッチされた命令デコード(解析)されて実行に移される。フェッチにかかる時間を「フェッチサイクル」(fetch cycle)あるいは「命令サイクル」(instruction cycle)という。
また、CPUやソフトウェアが将来必要になる(かもしれない)データなどを先取りして読み出しておくことで読み込み動作にかかる待ち時間を削減する手法が様々な分野で幅広く利用されており、そのような「先読み」方式のことを「プリフェッチ」(prefetch)という。
var box = document.getElementById("box") fetch("logo.svg") .then(function(response) { return response.text(); }).then(function(svg) { box.innerHTML = svg })
