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

【问题标题】：How to change svg pie chart slices to begin at the top and make clockwise animation dynamically with jquery如何将 svg 饼图切片更改为从顶部开始并使用 jquery 动态制作顺时针动画
【发布时间】：2019-08-20 00:02:20
【问题描述】：

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

我的问题是：

如何在不旋转<svg>的情况下使图表从顶部（12点钟位置）开始？
我将使用 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>

【问题讨论】：

标签： jquery css animation svg

【解决方案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>

【讨论】：