jquery - 如何更改 svg 饼图切片从顶部开始并使用 jquery 动态制作顺时针动画

Question

我想制作一个带动画的饼图，这是我的代码。

我的问题是:

1. 如何使图表从顶部(12 点钟位置)开始而不旋转 <svg> ？
2. 我将使用 JQuery 创建饼图切片。如何设置 CSS @keyframes stroke-dasharray动态地使用 JQuery？

谢谢!

@keyframes animate_p1 {
  to { stroke-dasharray: 78.5 314; } /* 314 ÷ 4 = 78.5 */
}
#bg {
  fill: #ddd;
}
#p1 {
  stroke-dasharray: 0 314; /* 2π × 50 ≈ 314 */
  stroke-dashoffset: 0;
  animation: animate_p1 1s linear forwards;
}

<svg width="200" height="200">
  <circle id="bg" r="100" cx="100" cy="100" />
  <circle id="p1" r="50" cx="100" cy="100" stroke="yellowgreen" stroke-width="100" fill="none" />
</svg>

Answer 1

一个简单的解决方案是旋转 SVG 元素。另一种解决方案是使用路径而不是第二个圆圈。

如果您查看路径，您会发现它从 M100,50 开始，这是您需要开始的顶部。接下来是锥形 2 条弧线，按照您需要动画发生的顺序淹没:第一个是右边的:A50,50 0 0 1 100,150 接下来是左边的:A50,50 0 0 1 100 ,50。

希望对你有帮助。

@keyframes animate_p1 {
  to { stroke-dasharray: 78.5 314; } /* 314 ÷ 4 = 78.5 */
}
#bg {
  fill: #ddd;
}
#p1 {
  stroke-dasharray: 0 314; /* 2π × 50 ≈ 314 */
  stroke-dashoffset: 0;
  animation: animate_p1 1s linear forwards;
}

svg{border:1px solid}

<svg width="200" height="200">
  <circle id="bg" r="100" cx="100" cy="100" />
  
  
  
  <path d="M100,50A50,50 0 0 1 100,150A50,50 0 0 1 100,50" id="p1" r="50" cx="100" cy="100" stroke="yellowgreen" stroke-width="100" fill="none" />
</svg>