SVG - circle rotating around circle - css

Question

I have two circles, one just an outline, and one filled in.
<svg width="300" height="300" style="border: 1px solid black">
<circle stroke="black" stroke-width="1" r="100" cx="150" cy="150" fill="white"></circle>
<circle r="10" cx ="50" cy="150"></circle>
</svg>
I want the filled-in circle to rotate around the other circle. How can I do this? A css/svg only solution would be great, as this will be a .svg file, not a .html file.

Answer 1

So, I decided to try using only HTML and CSS for this.
.inner {
margin: 0 auto;
height: 250px;
width: 250px;
border-radius: 100%;
border: 1px solid black;
position: relative;
}
.outter {
height: 20px;
width: 20px;
border-radius: 100%;
background: black;
position: absolute;
top: 115px;
left: 115px;
animation: spin 5s linear infinite;
}
#keyframes spin {
from {
transform: rotate(0deg) translate(125px);
}
to {
transform: rotate(360deg) translate(125px);
}
}
<div class="inner">
<div class="outter"></div>
</div>
Hope it helps.
Regards
EDITED: Made with SVG.
.outter {
transform-origin: 150px 150px;
animation: spin 5s infinite linear;
}
#keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<svg width="300" height="300" style="border: 1px solid black">
<circle stroke="black" stroke-width="1" r="100" cx="150" cy="150" fill="white"></circle>
<circle class="outter" r="10" cx ="50" cy="150"></circle>
</svg>

Answer 2

You could also use a svg SMIL animation like <animateTransform>
<svg width="300" height="300" style="border: 1px solid black">
<circle stroke="black" stroke-width="1" r="100" cx="150" cy="150" fill="white" />
<circle id="dot" r="10" cx="50" cy="150" />
<animateTransform href="#dot" attributeName="transform" type="rotate" from="0 150 150" to="360 150 150" dur="3s" repeatCount="indefinite" />
</svg>
The above <animateTransform> values translates to these transformation attributes:
From
transform="rotate(0 150 150)"
to
transform="rotate(360 150 150)"
Unlike its css counterpart svg's rotate() accepts 3 arguments
rotation angle (mandatory)
transform origin x
transform origin y
This way we can define the pivot point – in this case the center of our circle/svg.
Probably the main benefit of SMIL animations: they will also play in <img> elements and background-images.
This concept is often used for loading spinner svgs.