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.

CodePudding user response：

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 >
  <div ></div>
</div>

Hope it helps. Regards

CodePudding user response：

i think you can use transform with transtition

circle{
transform: translate(20px,10px) ;
transition: transform 1s;

}