CODEWITHSUNDEEP
cssanimationsvg
Caleb Liu
Caleb Liu

Reputation: 757

SVG - circle rotating around circle

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.

Upvotes: 0

Views: 1310

Answers (2)

herrstrietzel
herrstrietzel

Reputation: 17205

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

  1. rotation angle (mandatory)
  2. transform origin x
  3. 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.

Upvotes: 1

Ricardo Silva
Ricardo Silva

Reputation: 139

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>

Upvotes: 1

Related Questions