使用SVG和Javascript动画增长/缩小饼图

Question

我想使用嵌入在HTML中的Javascript和SVG创建一个增长的饼图动画。输入应为百分比，输出应为图像。它应该像这样动画：

这应该像GUI鼠标保持动作反馈一样（用户需要长按某事）。这也是我无法使用GIF动画的原因，因为超时可能会有所不同。

我尝试在Inkscape中进行此操作，然后对XML进行反向工程，但我根本不理解它。那个<path>节点的属性d充满了胡言乱语的数字：

d="m 250.78761,446.46564 a 28.183382,28.183382 0 0 1 -24.596,27.95413 28.183382,28.183382 0 0 1 -30.85751,-20.83773"

我认为这些是一些路径。但是，我不能制作圈子，并提及它的完整百分比吗？这些点甚至是如何生成的？

这就是我玩的：

＆＃13;

＆＃13;

body, html {
  padding: 0px; 
  margin: 0px;
  border: 1px solid grey;
  }
svg {
  /** to fit svg in the viewbox**/
  max-height: 400px;
  border: 1px solid black;
}

＆＃13;

<svg class="test" viewBox="-20 -20 1000 1000">

    <path
       id="circle4146"
       style="stroke:#61a4ff;stroke-width:15.00000095;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"
       sodipodi:type="arc"
       sodipodi:cx="140.71873"
       sodipodi:cy="446.46564"
       sodipodi:rx="28.183382"
       sodipodi:ry="28.183382"
       sodipodi:start="0"
       sodipodi:end="1.1720792"
       sodipodi:open="true"
       d="m 168.90212,446.46564 a 28.183382,28.183382 0 0 1 -17.24157,25.97267" />
</svg>

＆＃13;

＆＃13;

＆＃13;

sodipodi的东西可能被inkscape使用，改变它没有任何效果。我知道d属性描述了复杂的路径。我真正需要的是有人强调我应该移动哪些点（使用sin和cos我假设）以达到预期的效果。

此外，我无法将视口调整为圆圈。显然有些坐标不是X和Y.

Answer 1

这样的东西？在这里，我只是计算百分比所代表的圆周长度。然后我给圆圈一个划线短划线图案，长度和间隙很大。

＆＃13;

＆＃13;

setCircleTo(70);

function setCircleTo(percent)
{
    // Get the circle element via the DOM
    var circle = document.getElementById('mycircle');
    // Calculate the circle circumference via the circles 'r' attribute
    var circumference = Math.PI * 2 * circle.r.baseVal.value;
    // Calculate what <percent> of the circumference is
    var adjustedLen = percent * circumference / 100;
    // Set the circle's dashpattern one with a dash that length
    circle.setAttribute('stroke-dasharray', adjustedLen+' '+circumference);
}

＆＃13;

<svg class="test" viewBox="-20 -20 1000 1000">

   <circle id="mycircle" cx="100" cy="75" r="50" stroke-width="30" fill="none" stroke="#61a4ff"/>

</svg>

＆＃13;

＆＃13;

＆＃13;