我有一個像這樣的 SVG，
<svg xmlns="http://www.w3.org/2000/svg" width="1130" height="1130">
<g fill="none" stroke="#1864ab" stroke-width="2" stroke-dasharray="4" opacity=".4">
<circle cx="565" cy="565" r="565" stroke="none"/>
<circle cx="565" cy="565" r="564"/>
</g>
</svg>我想給人的印象是這個圓圈順時針旋轉我無法弄清楚，我過去做過筆觸影片，一個筆畫一個接一個地繪制，所以 svg 看起來像是正在繪制，但我從來沒有影片 svg 的旋轉。
uj5u.com熱心網友回復：
或者用SMIL：
<svg xmlns="http://www.w3.org/2000/svg" width="1130" height="1130">
<g fill="none"
stroke="#1864ab" stroke-width="2" stroke-dasharray="4" opacity=".4">
<circle cx="565" cy="565" r="565" stroke="none"/>
<circle cx="565" cy="565" r="564"/>
<animateTransform attributeName="transform"
type="rotate"
from="360 565 565"
to="0 565 565"
dur="4.1s"
repeatCount="indefinite"/>
</g>
</svg>uj5u.com熱心網友回復：
您可以嘗試設定animation它從哪里開始360deg并使其-360deg順時針旋轉。請參閱下面的示例。
@keyframes rotation {
0%{ transform: rotate(360deg); }
100%{ transform: rotate(-360deg); }
}
svg {
animation: rotation 5s linear infinite;
}<svg xmlns="http://www.w3.org/2000/svg" width="1130" height="1130">
<g fill="none" stroke="#1864ab" stroke-width="2" stroke-dasharray="4" opacity=".4">
<circle cx="565" cy="565" r="565" stroke="none"/>
<circle cx="565" cy="565" r="564"/>
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381200.html
上一篇：粘性導航欄不粘