如何創建邊有鏈接的圓圈我在試著做一個像這樣的圓圈這，這個..我成功了，但問題是，我需要每個橙色的一面是一個鏈接，我不能這樣做的邊界。如果有人能幫我這個忙，我會非常感激的。#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>
3 回答
慕勒3428872
TA貢獻1848條經驗 獲得超6個贊
svgarcsvg
.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>
- 3 回答
- 0 關注
- 496 瀏覽
添加回答
舉報
0/150
提交
取消