How to rotate a div across the axis of an svg circle - css

Question

I have a black circle and a small red circle on the axis of the bigger one:
Both are created with simple svg code:
export default function App() {
return (
<div>
<svg className="main-svg" viewBox="0 0 100 100">
<circle pathLength="25" cx="50%" cy="50%" r="50%" />
</svg>
<svg viewBox="0 0 100 100">
<circle
className="small-circle"
transform-origin="center"
fill="green"
pathLength="25.5"
cx="50%"
cy="50%"
r="50%"
/>
</svg>
</div>
);
}
It's easy to rotate the smaller one, because both circles have the same radius so you just need to change the degree:
svg {
position: absolute;
}
.small-circle {
transform: rotate(20deg);
stroke-linecap: round;
stroke-width: 5;
stroke-dasharray: 0 25;
stroke-dashoffset: -2.5;
fill: none;
stroke: red;
}
However I would like to insert some content into that red circle svg, namely use a div, and to my knowledge it's very difficult to do with svg. How can I create a rotating div instead of the red svg, hopefully without constant pixel values to it's sizable like the svgs?
The code on stackblitz: https://stackblitz.com/edit/react-ts-fwmjzn?file=style.css

Answer 1

Although <foreignObject can be inserted to SVG, It's hard to implement your requirement.
Because of .small-circle is rendered by stroke, it's hard to locate x and y's positions when it is rotating.
Maybe using div and CSS3 is a good implement.
https://stackblitz.com/edit/react-ts-iq2aqm?file=App.tsx,style.css,index.tsx
import * as React from 'react';
import './style.css';
export default function App() {
return (
<div className="container">
<svg className="main-svg" viewBox="0 0 100 100">
<circle pathLength="25" cx="50%" cy="50%" r="50%" />
</svg>
<div className="small-circle">A</div>
</div>
);
}
h1,
p {
font-family: Lato;
}
body {
margin: 0;
}
.container {
position: relative;
outline: 1px solid red;
}
#keyframes rotate {
to {
transform: rotate(1turn);
}
}
.small-circle {
width: 5vw;
height: 5vw;
border-radius: 50%;
background-color: coral;
top: 50%;
margin-top: -2.5vw;
margin-left: -2.5vw;
position: absolute;
outline: 1px solid red;
transform-origin: 52.5vw center;
animation: rotate 8s linear infinite;
text-align: center;
}
hope help you.