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

Question

我想做一个像这样的圈子.我能够在小提琴中做到这一点,但问题是我需要每个橙色的一面是一个链接,我不能用边框做.如果有人能帮助我,我将非常感激.

#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's arc为链接创建节和svg锚(相当于HTML锚标签)标签.

.frag {
  fill: #FFA500;
  stroke: #FFFFFF;
  transition: fill 0.3s ;
}
.center {
  fill: #008000;
}
a:hover .frag {
  fill: #FFC722;
}
text {
  font-size: 17px;
  fill: #FFFFFF;
}

<svg width="200" height="200" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
  <a xlink:href="#"><path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">1</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">2</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">3</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">4</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">5</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">6</text></a>
  <a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a>
</svg>

你也可以伸展或调整大小svg.

.frag {
  fill: #FFA500;
  stroke: #FFFFFF;
  transition: fill 0.3s ;
}
.center {
  fill: #008000;
}
a:hover .frag {
  fill: #FFC722;
}
text {
  font-size: 17px;
  fill: #FFFFFF;
}

<svg width="100" height="200" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none">
  <g id="circle">
    <a xlink:href="#"><path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">1</text></a>
    <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">2</text></a>
    <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">3</text></a>
    <a xlink:href="#"><path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">4</text></a>
    <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">5</text></a>
    <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">6</text></a>
    <a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a>
  </g>
</svg>

<svg width="200" height="100" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none">
  <use xlink:href="#circle" />
</svg>

<svg width="150" height="150" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none">
  <use xlink:href="#circle" />
</svg>

<svg width="100" height="100" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none">
  <use xlink:href="#circle" />
</svg>

<svg width="50" height="50" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none">
  <use xlink:href="#circle" />
</svg>

Answer 2

创建带有线段的圆的关键是沿圆圈找到将在SVG path元素中用作坐标的点.如果我们知道角度,使用三角方程可以很容易地找到圆上的点.

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

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

Radians中的角度=以度为单位的角度*Math.PI/180

角度取决于没有.我们必须创建的细分.通用公式是(360 /段数).因此,要创建一个包含6个线段的圆,每个线段覆盖的角度将为60度.第一段将覆盖0至60度,第二段将覆盖60至120度,依此类推.

6段圆圈演示:

下表显示了如何计算具有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段圆圈演示:

对于具有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)",a "To(Inner)"的行和"From(Inner)"的弧.

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中的文本添加稍微复杂一些,因为我们必须再次指定文本的放置点.如果文本相当小(比如几个字符),那么我们可以再次在圆上找到点,使得角度正好在段的中间并使用它.可以设置半径使得它是父圆的半径的一半(如果没有未分段的部分)或者它是在内圆和外圆之间的一半.的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坐标,圆的半径和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示例没有涵盖带有未分段内圈的示例,但可以通过扩展它来实现.

Answer 3

仅限CSS的方法

注意:使用我目前尚未使用的伪元素可以显着减少标记.

您可以使用SVG,但这可以仅使用CSS和HTML.

我所做的是创建12半圆(通过添加overflow: hidden;到父容器).然后我创建了单独的6半圆组.

中心的角度应为30deg每个(360/12).为实现这一目标,我们必须从原来的圆心旋转半圆.我们可以这样做transform-origin: 50% 100%;

现在您只需旋转/翻转第二组6半圆即可完成设计.

最后,添加一个中心绿色圆圈来完成设计.

.cont, #bag {
    height:200px;
    width:400px;
    overflow:hidden;
}
#one, #two, #three, #four, #five, #six {
    height:400px;
    width:400px;
    border-radius:200px;
}
#bag > div {
    position:relative;
    transform-origin:50% 100%;
}
#one, #three, #five {
    background-color:orange;
}
#one:hover, #three:hover, #five:hover {
    background-color:gold;
}
#two, #four, #six {
    background-color:forestgreen;
}
#bag > :nth-child(2) {
    top:-200px;
    -webkit-transform:rotate(30deg);
    transform:rotate(30deg);
}
#bag > :nth-child(3) {
    top:-400px;
    transform:rotate(60deg);
    transform:rotate(60deg);
}
#bag > div:nth-child(4) {
    top:-600px;
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}
#bag > :nth-child(5) {
    top:-800px;
    -webkit-transform:rotate(120deg);
    transform:rotate(120deg);
}
#bag > :nth-child(6) {
    top:-1000px;
    -webkit-transform:rotate(150deg);
    transform:rotate(150deg);
}
#bag:nth-of-type(2){
    transform:scale(-1);
    transform-origin:50% 50%;
}
#green-center {
    height:200px;
    width:200px;
    border-radius:50%;
    background-color:forestgreen;
    position: relative;
    top:-300px;
    left:100px;
}

<div id="bag">
    <div class="cont">
        <a href="http://example.com/"><div id="one"></div></a>
    </div>
    <div class="cont">
        <div id="two">ABC</div>
    </div>
    <div class="cont">
        <a href="http://example.com/"><div id="three"></div></a>
    </div>
    <div class="cont">
        <div id="four"></div>
    </div>
    <div class="cont">
        <a href="http://example.com/"><div id="five"></div></a>
    </div>
    <div class="cont">
        <div id="six"></div>
    </div>
</div>
<div id="bag">
    <div class="cont">
        <a href="http://example.com/"><div id="one"></div></a>
    </div>
    <div class="cont">
        <div id="two"></div>
    </div>
    <div class="cont">
        <a href="http://example.com/"><div id="three"></div></a>
    </div>
    <div class="cont">
        <div id="four"></div>
    </div>
    <div class="cont">
        <a href="http://example.com/"><div id="five"></div></a>
    </div>
    <div class="cont">
        <div id="six"></div>
    </div>
</div>
<div id="green-center">

Firefox,Google Chrome和IE上的输出: