svgの内部にposition: absolute；で要素を描画できない問題を解決したい。

アニメーションが走る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件

ベストアンサー

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>