SVG - 繞圓旋轉的圓

Question

我有兩個圓圈，一個只是輪廓，一個是填充的。

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

我希望實心圓圈圍繞另一個圓圈旋轉。 我怎樣才能做到這一點？ 僅使用 css/svg 的解決方案會很棒，因為這將是.svg文件，而不是.html文件。

Answer 1

因此，我決定為此嘗試僅使用 HTML 和 CSS 。

 .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>

希望能幫助到你。 問候

編輯：用 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

您也可以使用 svg SMIL animation 像<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>

上面的<animateTransform>值轉換為這些轉換屬性：

從

transform="rotate(0 150 150)"   

至

transform="rotate(360 150 150)"   

與其 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 對應的 svg 的 rotate() 不同，它接受 3 arguments

1. 旋轉角度（強制）
2. 變換原點 x
3. 變換原點 y

通過這種方式，我們可以定義 pivot 點——在這種情況下，我們的圓/svg 的中心。

可能是 SMIL 動畫的主要好處：它們也可以在<img>元素和背景圖像中播放。
這個概念通常用於加載微調器 svg。

Answer 3

我認為您可以使用帶有過渡的變換

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

}