Question

我想要创建一个这样的svg：

因此，圆周被和弦分为两部分。这两个部分必须具有不同的颜色。

我想在SVG中绘制该对象。我想我需要使用PATH标签，对吗？还是有其他方法可以做到？我需要画点什么？我有点困惑。

Answer 1

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

路径始终以M (move) command开头。您还需要A (arc) command，并且可能需要L line command来将等分圆的直线。

对于arc命令，您只需要知道起点和终点（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>

画一个圆，一分为二

1 个答案: