Как изменить кусочки круговой диаграммы 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, который находится наверху, где вам нужно начать. Далее идут две тонкие дуги в том порядке, в котором вам нужна анимация: сначала правая: 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>