CSS Clip/Path/Mask/Shape 带圆或弧段的动画

Question

如何制作蛋糕、时钟或圆圈形式的动画形状，从一小片开始，然后随着时间的推移填满整个圆圈：

CSS可以吗？还是我需要 SVG？我找不到任何 CSS 形状、遮罩、剪切路径或任何适用于此形状的东西。

非常感谢您的任何提示！

Answer 1

事实证明，“饼图”是 google 的术语...

基于 Lea Verou 的一篇包含 2 种不同方法的详尽文章 https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/，这是我的解决方案：

<svg viewbox="0 0 16 16" width="100px" height="100px" fill="none">

  <circle cx="8" cy="8" r="4" stroke="#000" data-fallback="edge"
    stroke-width="8px"
    transform="rotate(-90, 8, 8)"
    stroke-dasharray="0, 100" >
    
    <animate attributeName="stroke-dasharray"
      dur="2s" to="100,100"
      fill="freeze" />

  </circle>

</svg>

CSS Clip/Path/Mask/Shape 带圆或弧段的动画

CSS Clip/Path/Mask/Shape Animation with circle or arc segment

css

animation

geometry

svg

shapes