画一个被弦一分为二的圆

Question

我想创建一个这样的 svg：

所以，一个圆周被一个弦分成两部分。这两个部分必须有不同的颜色。

我想在 SVG 中绘制这个对象。我想我需要使用 PATH 标签，对吧？还是有其他方法可以做到这一点？ 绘制对象需要哪些点？我有点糊涂了。。

Answer 1

是的。这是您需要的 <path> 元素。

路径总是以M (move) command 开头。您还需要一个A (arc) command，可能还需要一个L line command 来表示将圆一分为二的线。

对于圆弧命令，您只需要知道起点和终点（B 和 C）的 X 和 Y 坐标。加上圆的半径。为圆弧命令的起点和终点提供准确的坐标非常重要。小的差异可能会导致圆圈的位置移动很多。

在下面的演示中，我选择根据它们与中心的角度来计算 B 和 C 的位置。加上从代码中设置路径描述属性，我可以为您记录每个参数的用途。

// Radius of the circle
var radius = 80;

// Centre coordinate of the circle
var Ox = 100;
var Oy = 100;

// Angles of each point from which we calculate their X and Y coordinates.
// Here, 0 degrees is East, and angle increases in a clockwise direction.
var angleB = 285;  // degrees
var angleC = 35;

var B = angleToCoords(angleB, Ox, Oy, radius);
var C = angleToCoords(angleC, Ox, Oy, radius);

// Get the "major segment" path element
var majorPath = document.getElementById("major");

// Set the path description for the "major segment"
majorPath.setAttribute("d", ['M', B.x, B.y,         // Move to point B
                             'L', C.x, C.y,         // Line to point C
                             'A', radius, radius,   // X radius and Y radius of the arc
                                  0,                // ellipse angle
                                  1,                // large arc flag (1 indicates we want the larger of the two possible arcs between the points
                                  1,                // clockwise direction flag
                                  B.x, B.y,         // arc end point is back at point B
                             'Z'].join(" "));       // Z command closes the path

// Get the "minor segment" path element
var minorPath = document.getElementById("minor");

// Set the path description for the "minor segment"
minorPath.setAttribute("d", ['M', B.x, B.y,         // Move to point B
                             'A', radius, radius,   // X radius and Y radius of the arc
                                  0,                // ellipse angle
                                  0,                // large arc flag (0 indicates we want the smaller of the two possible arcs between the points
                                  1,                // clockwise direction flag
                                  C.x, C.y,         // arc end point is at point C
                             'L', B.x, B.y,         // Line to point B
                             'Z'].join(" "));       // Z command closes the path


// Function to convert from an angle to an X and Y position
function angleToCoords(angleInDegrees, centreX, centreY, radius)
{
  var angleInRadians = angleInDegrees * Math.PI / 180;
  return {
    'x': centreX + (radius * Math.cos(angleInRadians)),
    'y': centreY + (radius * Math.sin(angleInRadians))
  }
}

path {
  stroke: black;
  stroke-width: 1;
}

#major {
  fill: #78dcdc;
}

#minor {
  fill: #aaffaa;
}

<svg width="200" height="200">

  <path id="major" d="" />
  <path id="minor" d="" />

</svg>