SVG - 绕圆旋转的圆

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

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.

Answer 3

i think you can use transform with transtition

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

}