html - 如何用边界边上的链接创建一个圆

Question

我正在尝试像this这样的圆圈。我能够在小提琴中做到这一点，但问题是我需要每个橙色面都为一个链接，而不能使用边框来做到这一点。如果有人可以帮助我，我将非常感激。

#circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: green;
}
#incircle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px dotted orange;
}

<div id="circle">
  <div id="incircle"></div>
</div>

Answer 1

创建带有分段的圆的关键是沿着圆查找点，这些点将在SVG path元素中用作坐标。如果我们知道角度，则可以使用三角方程轻松地找到圆上的点。


  点的X坐标=圆的半径* Cos（以弧度表示的角度）+中心点的X坐标
  
  点的Y坐标=圆的半径* Sin（以弧度表示的角度）+中心点的Y坐标
  
  以弧度表示的角度=以度表示的角度* Math.PI / 180


角度取决于编号。我们必须创建的细分。通用公式为（360 /段数）。因此，要创建一个包含6个线段的圆，每个线段所覆盖的角度将为60度。第一部分覆盖0到60度，第二部分覆盖60到120度，依此类推。



具有6个细分的Circle演示：

下表显示了如何计算具有6个线段的圆的点（圆的半径为50，中心点为55,55）：



一旦计算出点，对path本身进行编码就很简单。路径应该在中心点（即50,50）处开始和结束，我们应该先从中心点画一条线到From Point，然后再从那里画一条弧到To Point。以下是示例path的外观：

<path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />

svg {
  height: 220px;
  width: 220px;
}
path {
  fill: transparent;
  stroke: black;
}

<svg viewBox='0 0 110 110'>
  <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />
  <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' />
  <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' />
  <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' />
  <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' />
  <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' />
</svg>

具有12个细分的Circle演示：

对于具有12个线段的圆，每个线段将覆盖30度，因此点的计算如下表所示：

svg {
  height: 220px;
  width: 220px;
}
path {
  fill: transparent;
  stroke: black;
}

<svg viewBox='0 0 110 110'>
  <path d='M55,55 L105,55 A50,50 0 0,1 98.30,80z' />
  <path d='M55,55 L98.30,80 A50,50 0 0,1 80,98.30z' />
  <path d='M55,55 L80,98.30 A50,50 0 0,1 55,105z' />
  <path d='M55,55 L55,105 A50,50 0 0,1 30,98.30z' />
  <path d='M55,55 L30,98.30 A50,50 0 0,1 11.69,80z' />
  <path d='M55,55 L11.69,80 A50,50 0 0,1 5,55z' />
  <path d='M55,55 L5,55 A50,50 0 0,1 11.69,30z' />
  <path d='M55,55 L11.69,30 A50,50 0 0,1 30,11.69z' />
  <path d='M55,55 L30,11.69 A50,50 0 0,1 55,5z' />
  <path d='M55,55 L55,5 A50,50 0 0,1 80,11.69z' />
  <path d='M55,55 L80,11.69 A50,50 0 0,1 98.30,30z' />
  <path d='M55,55 L98.30,30 A50,50 0 0,1 105,55z' />
</svg>

内圈未分割的圆圈：

如果看起来好像圆心的一部分（半径较小）看起来没有分段，并且内部不需要透明，则只需在SVG的末端添加一个额外的圆元素即可。

svg {
  height: 220px;
  width: 220px;
}
path {
  fill: transparent;
  stroke: black;
}
circle {
  fill: yellowgreen;
  stroke: black;
}

<svg viewBox='0 0 110 110'>
  <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />
  <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' />
  <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' />
  <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' />
  <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' />
  <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' />
  <circle cx='55' cy='55' r='25' />
</svg>

每个细分受众群的背景不同：

如果每个段的背景都不同，则只需将 fill属性添加到每个 path元素。

svg {
  height: 220px;
  width: 220px;
}
path {
  stroke: black;
}
circle {
  fill: yellowgreen;
  stroke: black;
}

<svg viewBox='0 0 110 110'>
  <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' fill='crimson' />
  <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' fill='tomato' />
  <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' fill='sandybrown' />
  <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' fill='mediumseagreen' />
  <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' fill='chocolate' />
  <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' fill='teal' />
  <circle cx='55' cy='55' r='25' />
</svg>

具有透明内部的演示：

如果中心部分不能具有纯色，则整个事情会变得更加复杂，因为我们无法再在中心点开始和结束路径。在这种情况下，我们必须在外圆和内圆上都找到点，如下所示：



在这种情况下， path必须从“ From（Inner）”开始并在同一点结束，应从起点开始将一条线绘制到“ From（Outer）”，然后将一条弧线绘制到“ To（Outer）” ”，“到（内部）”的直线和“从（内部）”的弧形。

svg {
  height: 220px;
  width: 220px;
}
path {
  fill: transparent;
  stroke: black;
}

<svg viewBox='0 0 110 110'>
  <path d='M80,55 L105,55 A50,50 0 0,1 80,98.30 L67.5,76.65 A25,25 0 0,0 80,55z' />
  <path d='M67.5,76.65 L80,98.30 A50,50 0 0,1 30,98.30 L42.5,76.65 A25,25 0 0,0 67.5,76.65z' />
  <path d='M42.5,76.65 L30,98.30 A50,50 0 0,1 5,55 L30,55 A25,25 0 0,0 42.5,76.65z' />
  <path d='M30,55 L5,55 A50,50 0 0,1 30,11.69 L42.5,33.34 A25,25 0 0,0 30,55z' />
  <path d='M42.5,33.34 L30,11.69 A50,50 0 0,1 80,11.69 L67.5,33.34 A25,25 0 0,0 42.5,33.34z' />
  <path d='M67.5,33.34 L80,11.69 A50,50 0 0,1 105,55 L80,55 A25,25 0 0,0 67.5,33.4z' />
</svg>

将每个细分设为可点击的链接：

创建形状本身后，这非常简单。就像在chipChocolate.py的答案中一样，只需将每个路径包装在SVG锚标记（ <a xlink:href="#">，其中应将 #替换为链接页面的URL）内。

svg {
  height: 220px;
  width: 220px;
}
path {
  fill: transparent;
  stroke: black;
}

<svg viewBox='0 0 110 110'>
  <a xlink:href="#"><path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /></a>
  <a xlink:href="#"><path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' /></a>
  <a xlink:href="#"><path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' /></a>
  <a xlink:href="#"><path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' /></a>
  <a xlink:href="#"><path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' /></a>
  <a xlink:href="#"><path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' /></a>
</svg>

在形状内添加文本：

SVG中的文本添加稍微复杂些，因为我们必须再次指定应放置文本的位置。如果文本很小（例如几个字符），那么我们可以再次在圆上找到点，以使角度恰好位于线段的中间并使用它。可以将半径设置为父圆半径的一半（如果没有未分割的部分），或者位于内圆和外圆之间的一半。通过CSS添加的 text-anchor， dominant-baseline设置可以确保文本的放置方式使得文本的水平和垂直中心都与指定点匹配。

如果文本很大（并且需要环绕），则应该进行额外的处理，因为SVG text标记内的内容不会自动环绕。

具有6个线段且无中心非线段区域的圆的点计算：



具有6个线段和中心未分割区域的圆的点计算：

svg {
  height: 220px;
  width: 220px;
}
path {
  fill: transparent;
  stroke: black;
}
text {
  text-anchor: middle;
  dominant-baseline: middle; /* doesn't work in IE */
  font: 12px Calibri, Arial;
}

<svg viewBox='0 0 110 110'>
  <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />
  <text x='76.65' y='67.5'>1</text>
  <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' />
  <text x='55' y='80'>2</text>
  <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' />
  <text x='33.4' y='67.5'>3</text>
  <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' />
  <text x='33.4' y='42.5'>4</text>
  <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' />
  <text x='55' y='30'>5</text>
  <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' />
  <text x='76.65' y='42.5'>6</text>
</svg>
<svg viewBox='0 0 110 110'>
  <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />
  <text x='87.47' y='73.75'>1</text>
  <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' />
  <text x='55' y='92.5'>2</text>
  <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' />
  <text x='22.52' y='73.75'>3</text>
  <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' />
  <text x='22.52' y='36.25'>4</text>
  <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' />
  <text x='55' y='17.5'>5</text>
  <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' />
  <text x='87.47' y='36.25'>6</text>
  <circle cx='55' cy='55' r='25' />
</svg>

使用JavaScript动态创建：

以下是基于JS的粗略实现，以便动态创建细分。该函数采用四个参数-圆心的X坐标，圆心的Y坐标，圆的半径和no。分段/切片。

var fromAngle, toAngle, fromCoordX, fromCoordY, toCoordX, toCoordY, path, d;

function createPie(cx, cy, r, slices) {
  for (var i = 0; i < slices; i++) {
    path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    fromAngle = i * 360 / slices;
    toAngle = (i + 1) * 360 / slices;
    fromCoordX = cx + (r * Math.cos(fromAngle * Math.PI / 180));
    fromCoordY = cy + (r * Math.sin(fromAngle * Math.PI / 180));
    toCoordX = cx + (r * Math.cos(toAngle * Math.PI / 180));
    toCoordY = cy + (r * Math.sin(toAngle * Math.PI / 180));
    d = 'M' + cx + ',' + cy + ' L' + fromCoordX + ',' + fromCoordY + ' A' + r + ',' + r + ' 0 0,1 ' + toCoordX + ',' + toCoordY + 'z';
    path.setAttributeNS(null, "d", d);
    document.getElementById('pie').appendChild(path);
  }
}

createPie(55, 55, 50, 6);

svg {
  height: 220px;
  width: 220px;
}
path {
  fill: transparent;
  stroke: black;
}

<svg viewBox="0 0 110 110" id="pie"></svg>

JS示例没有覆盖带有未分段内圈的示例，但是可以通过扩展此范围来实现。