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

Question

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

我的问题是：

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

谢谢！

@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条弧线：首先是正确的{：{1}}，然后是左边的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}