html – 如何创建一个带有边框边界的圈子

我正在努力制作一个像 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>

解决方法

用段创建一个圆的关键是找到将在SVG路径元素中用作坐标的圆上的点。如果我们知道角度，可以使用三角方程来轻松找到圆圈。

X Coordinate of point = Radius of the circle * Cos(Angle in radians) + X Coordinate of center point

Y Coordinate of point = Radius of the circle * Sin(Angle in radians) + Y Coordinate of center point

Angle in radians = Angle in degrees * Math.PI / 180

角度取决于不。我们必须创建的细分。通用公式是(360 /否分段)。所以要创建一个有6个段的圆，每个段所覆盖的角度将是60度。第一段将覆盖0至60度，第二段为60至120度，依此类推。

6段细节演示：

下表显示如何计算具有6段(圆半径为50，中心点为55,55)的圆的点：

一旦计算出点，编码路径本身就很简单。路径应该从中心点开始和结束(即50,50)，从中心点开始，我们应该先绘制一条线到“起点”，从那里向“点”绘制一条弧线。以下是一个示例路径如下所示：

<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,98.30z' />
  <path d='M55,55 L80,98.30 A50,1 30,55 L30,1 5,55z' />
  <path d='M55,55 L5,11.69z' />
  <path d='M55,11.69 A50,1 105,55z' />
</svg>

12段细节演示：

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

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

<svg viewBox='0 0 110 110'>
  <path d='M55,1 98.30,80z' />
  <path d='M55,55 L98.30,80 A50,1 55,105z' />
  <path d='M55,55 L55,105 A50,1 11.69,55 L11.69,30z' />
  <path d='M55,30 A50,5z' />
  <path d='M55,5 A50,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,55z' />
  <circle cx='55' cy='55' r='25' />
</svg>

每个细分的不同背景：

如果每个段都应该具有不同的背景，那么只需将fill属性添加到每个路径元素。

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

<svg viewBox='0 0 110 110'>
  <path d='M55,98.30z' fill='crimson' />
  <path d='M55,98.30z' fill='tomato' />
  <path d='M55,55z' fill='sandybrown' />
  <path d='M55,11.69z' fill='mediumseagreen' />
  <path d='M55,11.69z' fill='chocolate' />
  <path d='M55,55z' fill='teal' />
  <circle cx='55' cy='55' r='25' />
</svg>

具有透明内部部分的演示：

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

在这种情况下，路径必须从“从(内)”开始并在同一点结束，从一开始一行应该被绘制到“From(Outer)”，然后一个弧到“To(Outer)”， “To(Inner)”和“From(Inner)”的弧线。

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

<svg viewBox='0 0 110 110'>
  <path d='M80,98.30 L67.5,76.65 A25,25 0 0,0 80,55z' />
  <path d='M67.5,76.65 L80,98.30 L42.5,0 67.5,76.65z' />
  <path d='M42.5,76.65 L30,55 A25,0 42.5,76.65z' />
  <path d='M30,11.69 L42.5,33.34 A25,0 30,55z' />
  <path d='M42.5,33.34 L30,11.69 L67.5,33.34z' />
  <path d='M67.5,33.34 L80,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,98.30z' /></a>
  <a xlink:href="#"><path d='M55,55z' /></a>
  <a xlink:href="#"><path d='M55,11.69z' /></a>
  <a xlink:href="#"><path d='M55,55z' /></a>
</svg>

在形状内添加文字：

SVG中的文本添加稍微复杂一些，因为我们必须指定文本应放在哪里。如果文本相当小(说几个字符)，那么我们可以再次在圆上找到点，使得角度正好位于段的中间并使用。半径可以设置为使其成为圆半径的一半(如果没有未分段的部分)，或者使其在内圆和外圆之间的一半。通过CSS添加的文本锚，主要基准设置将确保文本的位置使得文本的水平和垂直中心都与指定点匹配。

如果文本很大(并且需要环绕)，则应该进行额外的处理，因为SVG文本标签内的内容不会被自动包装。

具有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,98.30z' />
  <text x='76.65' y='67.5'>1</text>
  <path d='M55,98.30z' />
  <text x='55' y='80'>2</text>
  <path d='M55,55z' />
  <text x='33.4' y='67.5'>3</text>
  <path d='M55,11.69z' />
  <text x='33.4' y='42.5'>4</text>
  <path d='M55,11.69z' />
  <text x='55' y='30'>5</text>
  <path d='M55,55z' />
  <text x='76.65' y='42.5'>6</text>
</svg>
<svg viewBox='0 0 110 110'>
  <path d='M55,98.30z' />
  <text x='87.47' y='73.75'>1</text>
  <path d='M55,98.30z' />
  <text x='55' y='92.5'>2</text>
  <path d='M55,55z' />
  <text x='22.52' y='73.75'>3</text>
  <path d='M55,11.69z' />
  <text x='22.52' y='36.25'>4</text>
  <path d='M55,11.69z' />
  <text x='55' y='17.5'>5</text>
  <path d='M55,55z' />
  <text x='87.47' y='36.25'>6</text>
  <circle cx='55' cy='55' r='25' />
</svg>

使用JavaScript进行动态创建

下面是一个粗略的基于JS的实现，以动态创建段。该函数有四个参数 – 圆的中心的X坐标，其中心的Y坐标，圆的半径和否。的片段/片段。

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样本不覆盖具有未分段内圆的示例，但可以通过扩展来实现。

原文地址：https://www.jb51.cc/html/232742.html

html – 如何创建一个带有边框边界的圈子

解决方法

相关推荐