Q&A
アニメーションが走るsvgのcircleの内部に赤丸のボタンを追加したい。
発生している問題・エラーメッセージ
赤丸がcircle-btnの内部に描画されない。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <link rel="stylesheet" href="css/style.css"> 10</head> 11 12<body> 13 <svg width="16" height="16" class="circle-btn"> 14 <circle cx="8" cy="8" r="7"></circle> 15 <a href="" class="circle"></a> 16 </svg> 17 18 <script src="js/script.js"></script> 19</body> 20 21</html>
CSS
1svg { 2 transform: rotate(-90deg); 3} 4 5.circle-btn { 6 position: relative; 7 fill: transparent; 8 stroke: #4fa8df; 9 stroke-width: 1; 10 animation: circle 5s infinite; 11 cursor: pointer; 12} 13 14.circle { 15 position: absolute; 16 width: 8px; 17 height: 8px; 18 border-radius: 50%; 19 background: red; 20 top: 50%; 21 left: 50%; 22 transform: translate(-50%,-50%); 23} 24 25@keyframes circle { 26 0%{stroke-dasharray: 0 377;} 27 99.9%,to{stroke-dasharray: 377 377;} 28}
試したこと
こちらのサイトを参考にsvgのアニメーションを作成しました。
子要素が親要素のど真ん中に来るようにtransformで調整してみました。
以下は参考にしたサイトになります。
https://qiita.com/melo15/items/6cc3c24e448a8fb8492c
回答1件
0
ベストアンサー
SVGの中の要素に対して、position、width、height、border、background、top、left プロパティは指定できません。SVG で赤丸を描いてください。
svg
1 <svg width="16" height="16" class="circle-btn"> 2 <circle cx="8" cy="8" r="7"></circle> 3 <circle cx="8" cy="8" r="4" stroke-width="0" fill="red"></circle> 4 </svg>
投稿2021/03/22 12:48
編集2021/03/22 12:50
総合スコア21054
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。