如何使用JavaScript创建弧数学和SVG？

Question

我正在尝试执行一个函数，以便在SVG路径上获取和弧形。

我创建了一个名为drawArcSegment的函数，它需要4个参数startPercentage, endPercentage, radius, thickness，并且我已经完成了一些伪代码

这是我已经拥有但我不知道如何提前

var drawArcSegment = function(startPercentage, endPercentage, radius, thickness) {
  point1 = (R*cos(A), R*sin(A));
  point2 = ( (R-D)*cos(A), (R-D)*sin(A) );
  point3 = ( (R-D)*cos(B), (R-D)*sin(B) );
  point4 = (R*cos(B), R*sin(B));

  d="M10 10 H 90 V 90 H 10 L 10 10";

  $("#myPath").attr("d", d);
}

html部分

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path stroke="black"
        stroke-dasharray="5,5"
        fill="green"
        id="myPath" />
</svg>

使用d var的值，我现在得到一个正方形。但是我需要这样的东西：

如果你想看一下，我有Pen。

那么，有什么建议吗？