程序员经验分享-hwhale

如何在边框一侧创建带有链接的圆圈

2024-01-18

我想画一个像这样的圆圈this http://jsfiddle.net/4ns3bc9h/1/。我能够在小提琴中做到这一点，但问题是我需要每个橙色边都是一个链接，而我不能用边框来做到这一点。如果有人能帮助我，我将非常感激。

#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 中使用path元素作为坐标。如果我们知道角度，则可以使用三角方程轻松找到圆上的点。

点的 X 坐标 = 圆的半径 * Cos(角度弧度) + 中心点的 X 坐标

点的 Y 坐标 = 圆的半径 * Sin(角度弧度) + 中心点的 Y 坐标

角度（弧度） = 角度（度数） * Math.PI / 180

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

6 段圆的演示：

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

计算出点后，编码path本身很简单。路径应该从中心点（50,50）开始和结束，从中心点开始，我们应该首先画一条线到起始点，然后从那里画一条弧到结束点。下面是一个示例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 段圆演示：

对于有 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)”，一条线到“To(内部）”和一条到“从（内部）”的弧线。

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="#"> where #应替换为链接页面的 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 中的文本添加稍微复杂一些，因为我们必须再次指定文本应放置的点。如果文本相当小（比如几个字符），那么我们可以再次在圆上找到点，使角度恰好位于线段的中间并使用它。可以将半径设置为父圆半径的一半（如果没有未分段的部分），或者设置为内圆和外圆之间的一半。这text-anchor, dominant-baseline通过 CSS 添加的设置将确保文本的位置使文本的水平和垂直中心与指定点匹配。

如果文本很大（并且需要环绕），则应进行额外处理，因为 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 坐标、圆的半径和编号。段/切片。

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

SVG

cssshapes

如何在边框一侧创建带有链接的圆圈 的相关文章

随机推荐

热门标签