如何在边框侧创建一个带有链接的圆圈
How to create a circle with links on border side
我想画一个像 this 这样的圆圈。我能够在 fiddle 中做到这一点,但问题是我需要每个橙色边都是 link 而我不能用边框来做到这一点。如果有人可以帮助我,我将非常感激。
#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 的工作。它有自己的 <a>
element 类型,可以包含任意形状。
HTML
<div id="circle">
<a id='left' href='left'></a>
<a id='right' href='right'></a>
<div id="mid"></div>
</div>
CSS
#circle{
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
a {
height: 100%;
width: 49%;
background: orange;
display: block;
}
#left {
float: left;
}
#right {
float: right;
}
#mid {
border-radius: 50%;
background: green;
border: 4px solid white;
position: absolute;
display: block;
height: 50%;
width: 50%;
left: 24%;
top: 24%;
}
可以通过垂直拆分 a
将其简单地扩展为 4 个部分而不是 2 个部分。但是我建议你看看 RaphaelJS
.你甚至可以作弊并使用 pie chart!
试试这个纯粹的 css:
*{box-sizing: border-box;padding: 0; margin: 0}
nav,nav:before{
border-radius:50%;
background:green
}
nav{
width:200px;
height:200px;
margin: 40px auto;
position: relative;
overflow: hidden
}
nav:before{
content: '';
position:absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
z-index: 2;
transform: translate3d(-50%,-50%,0)
}
#incircle{
width:100px;
height:100px;
border-radius:50%;
border:50px dotted orange;
}
nav a{
position: absolute;
z-index: 1;
cursor: pointer;
width: 0px;
height: 0px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent
}
nav a:nth-child(3),nav a:nth-child(4){
left: 70px;
border-left: 30px solid transparent;
border-right: 30px solid transparent
}
nav a:first-child{
top: 70px;
left: 0;
border-left: 100px solid orange
}
nav a:nth-child(2){
left: 20px;
border-left: 100px solid orange;
top: 20px;
transform: rotateZ(60deg);
}
nav a:nth-child(3){
transform: rotateZ(30deg);
top: 0px;
left: 86px;
border-top: 100px solid orange;
}
nav a:nth-child(4){
left: 46px;
border-bottom: 100px solid orange;
bottom: -4px;
transform: rotateZ(28deg);
}
nav a:nth-child(5){
right: 24px;
border-right: 100px solid orange;
bottom: 20px;
transform: rotateZ(60deg);
}
nav a:last-child{
top: 70px;
right: 0;
border-right: 100px solid orange
}
<nav>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</nav>
您可以使用地图,如下所示:
#circle{
position:relative;
width:200px;
height:200px;
border-radius:50%;
background:green;
}
#mappinglink{
position:absolute;
top:0px;
left:0px;
}
#incircle{
width:100px;
height:100px;
border-radius:50%;
border:50px dotted orange;
border-spacing: 10px 50px;
}
<div id="circle">
<div id="incircle"></div>
<img id="mappinglink" width="200" height="200" usemap="#mymap" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
<map name="mymap">
<area alt="" title="" href="#" shape="poly" coords="29,28,71,3,84,50,64,64" style="outline:none;" target="_self" />
<area alt="" title="" href="#" shape="poly" coords="148,12,122,55,142,73,184,46" style="outline:none;" target="_self" />
<area alt="" title="" href="#" shape="poly" coords="149,96,199,93,192,142,146,121" style="outline:none;" target="_self" />
<area alt="" title="" href="#" shape="poly" coords="105,149,128,141,159,180,112,200" style="outline:none;" target="_self" />
<area alt="" title="" href="#" shape="poly" coords="59,133,79,147,65,193,23,164" style="outline:none;" target="_self" />
<area alt="" title="" href="#" shape="poly" coords="48,87,50,108,3,120,4,71" style="outline:none;" target="_self" />
</map>
</div>
您可以使用 svg
的 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>
我尝试使用纯 css,
想出了这个:
.wrap {
height: 200px;
width: 200px;
background: red;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.wrap:after {
position: absolute;
height: 50%;
width: 50%;
content: "";
border-radius: 50%;
background: green;
left: 25%;
top: 25%;
}
.slice {
height: 0;
width: 0;
border-left: 200px solid blue;
border-top: 200px solid transparent;
position: absolute;
top: -100px;
left: -100px;
}
.part2 {
border-left: 200px solid red;
border-top: 200px solid transparent;
transform: rotate(180deg);
top: -100px;
left: -100px;
}
.part3 {
border-left: 200px solid pink;
border-top: 200px solid transparent;
transform: rotate(90deg);
top: -100px;
left: 100px;
}
<div class="wrap">
<a href="#" class="slice"></a>
<div class="slice part2"></div>
<a href="#" class="slice part3"></a>
</div>
然而,这是使用 "border trick" 生成蓝色 div,这将使它的一部分可以点击。但是,我确实觉得适应后,可以工作。
类似
var items = document.querySelectorAll('.circle a');
for(var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}
document.querySelector('.menu-button').onclick = function(e) {
e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}
@import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
body {
background: #39D;
}
.circular-menu {
width: 250px;
height: 250px;
margin: 0 auto;
position: relative;
}
.circle {
width: 250px;
height: 250px;
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open.circle {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
.circle a {
text-decoration: none;
color: white;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
margin-left: -20px;
margin-top: -20px;
position: absolute;
text-align: center;
}
.circle a:hover {
color: #eef;
}
.menu-button {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 30px);
text-decoration: none;
text-align: center;
color: #444;
border-radius: 50%;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
padding: 10px;
background: #dde;
}
.menu-button:hover {
background-color: #eef;
}
/* Author stuff */
h1.author {
text-align:center;
color: white;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
}
h1.author a {
color: #348;
text-decoration:none;
}
h1.author a:hover {
color: #ddd;
}
<nav class="circular-menu">
<div class="circle">
<a href="" class="fa fa-home fa-2x"></a>
<a href="" class="fa fa-facebook fa-2x"></a>
<a href="" class="fa fa-twitter fa-2x"></a>
<a href="" class="fa fa-linkedin fa-2x"></a>
<a href="" class="fa fa-github fa-2x"></a>
<a href="" class="fa fa-rss fa-2x"></a>
<a href="" class="fa fa-pinterest fa-2x"></a>
<a href="" class="fa fa-asterisk fa-2x"></a>
</div>
<a href="" class="menu-button fa fa-bars fa-2x"></a>
</nav>
CSS-only接近
注意:使用我目前还没有使用过的伪元素可以显着减少标记。
你可以使用SVG,但是这个可以用CSS 和 HTML 单独。
我所做的是创建 12
个半圆(通过将 overflow: hidden;
添加到父容器)。然后我创建了单独的 6
半圆组。
中心的角度应为每个角度 30deg
( 360/12
)。为此,我们必须从原来的圆心旋转半圆。我们可以用 transform-origin: 50% 100%;
来做到这一点
现在你只需要rotate/flip第二组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[=52= 上的输出]:
创建带线段的圆的关键是沿着圆找到将在 SVG path
元素中用作坐标的点。如果我们知道角度,可以使用三角方程轻松地找到圆上的点。
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 段圆形演示:
下面table显示了如何计算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 度,因此点的计算如下 table:
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)”,然后到“到(外)”的弧,到“到(内)”的线和到“从(内)”的弧。
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>
使每个片段都可点击link:
一旦创建了形状本身,这就非常简单了。就像 chipChocolate.py 的回答一样,只需将每个路径包装在一个 SVG 锚标记中(<a xlink:href="#">
,其中 #
应该替换为 linked 页面的 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 坐标、圆的半径和编号。 segments/slices.
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 示例不包括具有未分段内圆的示例,但可以通过扩展它来实现。
我想画一个像 this 这样的圆圈。我能够在 fiddle 中做到这一点,但问题是我需要每个橙色边都是 link 而我不能用边框来做到这一点。如果有人可以帮助我,我将非常感激。
#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 的工作。它有自己的 <a>
element 类型,可以包含任意形状。
HTML
<div id="circle">
<a id='left' href='left'></a>
<a id='right' href='right'></a>
<div id="mid"></div>
</div>
CSS
#circle{
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
a {
height: 100%;
width: 49%;
background: orange;
display: block;
}
#left {
float: left;
}
#right {
float: right;
}
#mid {
border-radius: 50%;
background: green;
border: 4px solid white;
position: absolute;
display: block;
height: 50%;
width: 50%;
left: 24%;
top: 24%;
}
可以通过垂直拆分 a
将其简单地扩展为 4 个部分而不是 2 个部分。但是我建议你看看 RaphaelJS
.你甚至可以作弊并使用 pie chart!
试试这个纯粹的 css:
*{box-sizing: border-box;padding: 0; margin: 0}
nav,nav:before{
border-radius:50%;
background:green
}
nav{
width:200px;
height:200px;
margin: 40px auto;
position: relative;
overflow: hidden
}
nav:before{
content: '';
position:absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
z-index: 2;
transform: translate3d(-50%,-50%,0)
}
#incircle{
width:100px;
height:100px;
border-radius:50%;
border:50px dotted orange;
}
nav a{
position: absolute;
z-index: 1;
cursor: pointer;
width: 0px;
height: 0px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent
}
nav a:nth-child(3),nav a:nth-child(4){
left: 70px;
border-left: 30px solid transparent;
border-right: 30px solid transparent
}
nav a:first-child{
top: 70px;
left: 0;
border-left: 100px solid orange
}
nav a:nth-child(2){
left: 20px;
border-left: 100px solid orange;
top: 20px;
transform: rotateZ(60deg);
}
nav a:nth-child(3){
transform: rotateZ(30deg);
top: 0px;
left: 86px;
border-top: 100px solid orange;
}
nav a:nth-child(4){
left: 46px;
border-bottom: 100px solid orange;
bottom: -4px;
transform: rotateZ(28deg);
}
nav a:nth-child(5){
right: 24px;
border-right: 100px solid orange;
bottom: 20px;
transform: rotateZ(60deg);
}
nav a:last-child{
top: 70px;
right: 0;
border-right: 100px solid orange
}
<nav>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</nav>
您可以使用地图,如下所示:
#circle{
position:relative;
width:200px;
height:200px;
border-radius:50%;
background:green;
}
#mappinglink{
position:absolute;
top:0px;
left:0px;
}
#incircle{
width:100px;
height:100px;
border-radius:50%;
border:50px dotted orange;
border-spacing: 10px 50px;
}
<div id="circle">
<div id="incircle"></div>
<img id="mappinglink" width="200" height="200" usemap="#mymap" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
<map name="mymap">
<area alt="" title="" href="#" shape="poly" coords="29,28,71,3,84,50,64,64" style="outline:none;" target="_self" />
<area alt="" title="" href="#" shape="poly" coords="148,12,122,55,142,73,184,46" style="outline:none;" target="_self" />
<area alt="" title="" href="#" shape="poly" coords="149,96,199,93,192,142,146,121" style="outline:none;" target="_self" />
<area alt="" title="" href="#" shape="poly" coords="105,149,128,141,159,180,112,200" style="outline:none;" target="_self" />
<area alt="" title="" href="#" shape="poly" coords="59,133,79,147,65,193,23,164" style="outline:none;" target="_self" />
<area alt="" title="" href="#" shape="poly" coords="48,87,50,108,3,120,4,71" style="outline:none;" target="_self" />
</map>
</div>
您可以使用 svg
的 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>
我尝试使用纯 css, 想出了这个:
.wrap {
height: 200px;
width: 200px;
background: red;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.wrap:after {
position: absolute;
height: 50%;
width: 50%;
content: "";
border-radius: 50%;
background: green;
left: 25%;
top: 25%;
}
.slice {
height: 0;
width: 0;
border-left: 200px solid blue;
border-top: 200px solid transparent;
position: absolute;
top: -100px;
left: -100px;
}
.part2 {
border-left: 200px solid red;
border-top: 200px solid transparent;
transform: rotate(180deg);
top: -100px;
left: -100px;
}
.part3 {
border-left: 200px solid pink;
border-top: 200px solid transparent;
transform: rotate(90deg);
top: -100px;
left: 100px;
}
<div class="wrap">
<a href="#" class="slice"></a>
<div class="slice part2"></div>
<a href="#" class="slice part3"></a>
</div>
然而,这是使用 "border trick" 生成蓝色 div,这将使它的一部分可以点击。但是,我确实觉得适应后,可以工作。
类似
var items = document.querySelectorAll('.circle a');
for(var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}
document.querySelector('.menu-button').onclick = function(e) {
e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}
@import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
body {
background: #39D;
}
.circular-menu {
width: 250px;
height: 250px;
margin: 0 auto;
position: relative;
}
.circle {
width: 250px;
height: 250px;
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open.circle {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
.circle a {
text-decoration: none;
color: white;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
margin-left: -20px;
margin-top: -20px;
position: absolute;
text-align: center;
}
.circle a:hover {
color: #eef;
}
.menu-button {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 30px);
text-decoration: none;
text-align: center;
color: #444;
border-radius: 50%;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
padding: 10px;
background: #dde;
}
.menu-button:hover {
background-color: #eef;
}
/* Author stuff */
h1.author {
text-align:center;
color: white;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
}
h1.author a {
color: #348;
text-decoration:none;
}
h1.author a:hover {
color: #ddd;
}
<nav class="circular-menu">
<div class="circle">
<a href="" class="fa fa-home fa-2x"></a>
<a href="" class="fa fa-facebook fa-2x"></a>
<a href="" class="fa fa-twitter fa-2x"></a>
<a href="" class="fa fa-linkedin fa-2x"></a>
<a href="" class="fa fa-github fa-2x"></a>
<a href="" class="fa fa-rss fa-2x"></a>
<a href="" class="fa fa-pinterest fa-2x"></a>
<a href="" class="fa fa-asterisk fa-2x"></a>
</div>
<a href="" class="menu-button fa fa-bars fa-2x"></a>
</nav>
CSS-only接近
注意:使用我目前还没有使用过的伪元素可以显着减少标记。
你可以使用SVG,但是这个可以用CSS 和 HTML 单独。
我所做的是创建 12
个半圆(通过将 overflow: hidden;
添加到父容器)。然后我创建了单独的 6
半圆组。
中心的角度应为每个角度 30deg
( 360/12
)。为此,我们必须从原来的圆心旋转半圆。我们可以用 transform-origin: 50% 100%;
现在你只需要rotate/flip第二组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[=52= 上的输出]:
创建带线段的圆的关键是沿着圆找到将在 SVG path
元素中用作坐标的点。如果我们知道角度,可以使用三角方程轻松地找到圆上的点。
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 段圆形演示:
下面table显示了如何计算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 度,因此点的计算如下 table:
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)”,然后到“到(外)”的弧,到“到(内)”的线和到“从(内)”的弧。
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>
使每个片段都可点击link:
一旦创建了形状本身,这就非常简单了。就像 chipChocolate.py 的回答一样,只需将每个路径包装在一个 SVG 锚标记中(<a xlink:href="#">
,其中 #
应该替换为 linked 页面的 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 坐标、圆的半径和编号。 segments/slices.
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 示例不包括具有未分段内圆的示例,但可以通过扩展它来实现。