Define a circle / arc animation in SVG

2019-02-05 02:25发布

Does anyone know how to define an animated arc / circle in SVG, such that the arc starts at 0 degrees and ends at 360 degrees?

7条回答
该账号已被封号
2楼-- · 2019-02-05 02:50

Or perhaps you could uncover a pre-drawn circle to give the required effect:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="400" height="400">
  <rect x="0" y="0" width="1000" height="1000"/>
  <circle cx="500" cy="500" r="500" fill="red"/>
  <rect x="0" y="500" width="1000" height="500"/>
  <rect x="0" y=  "0" width="1000" height="500">
    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" fill="freeze" from="0,500,500" to="180,500,500"/>
  </rect>
</svg>
查看更多
登录 后发表回答