请问 如何创建边有链接的圆圈

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氏arcs创建节和svg链接的锚(等效于HTML锚标记)标记。.frag&nbsp;{ &nbsp;&nbsp;fill:&nbsp;#FFA500; &nbsp;&nbsp;stroke:&nbsp;#FFFFFF; &nbsp;&nbsp;transition:&nbsp;fill&nbsp;0.3s&nbsp;;}.center&nbsp;{ &nbsp;&nbsp;fill:&nbsp;#008000;}a:hover&nbsp;.frag&nbsp;{ &nbsp;&nbsp;fill:&nbsp;#FFC722;}text&nbsp;{ &nbsp;&nbsp;font-size:&nbsp;17px; &nbsp;&nbsp;fill:&nbsp;#FFFFFF;}<svg&nbsp;width="200"&nbsp;height="200"&nbsp;viewBox="-2&nbsp;-2&nbsp;202&nbsp;203"&nbsp;shape-rendering="geometricPrecision"> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;v-100&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;86.6025,50"&nbsp;/><text&nbsp;x="135"&nbsp;y="42.5"&nbsp;text-anchor="middle">1</text></a> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l86.6025,-50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;0,100"&nbsp;/><text&nbsp;x="170"&nbsp;y="105"&nbsp;text-anchor="middle">2</text></a> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l86.6025,50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;-86.6025,50"&nbsp;/><text&nbsp;x="135"&nbsp;y="170"&nbsp;text-anchor="middle">3</text></a> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;v100&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;-86.6025,-50"&nbsp;/><text&nbsp;x="65"&nbsp;y="170"&nbsp;text-anchor="middle">4</text></a> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l-86.6025,50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;0,-100"&nbsp;/><text&nbsp;x="27.5"&nbsp;y="105"&nbsp;text-anchor="middle">5</text></a> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l-86.6025,-50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;86.0025,-50"&nbsp;/><text&nbsp;x="65"&nbsp;y="42.5"&nbsp;text-anchor="middle">6</text></a> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="center"&nbsp;d="M100,100&nbsp;v-50&nbsp;a50,50&nbsp;1&nbsp;0,1&nbsp;0,100&nbsp;a50,50&nbsp;1&nbsp;0,1&nbsp;0,-100"&nbsp;/></a></svg>您还可以扩展或调整svg..frag&nbsp;{ &nbsp;&nbsp;fill:&nbsp;#FFA500; &nbsp;&nbsp;stroke:&nbsp;#FFFFFF; &nbsp;&nbsp;transition:&nbsp;fill&nbsp;0.3s&nbsp;;}.center&nbsp;{ &nbsp;&nbsp;fill:&nbsp;#008000;}a:hover&nbsp;.frag&nbsp;{ &nbsp;&nbsp;fill:&nbsp;#FFC722;}text&nbsp;{ &nbsp;&nbsp;font-size:&nbsp;17px; &nbsp;&nbsp;fill:&nbsp;#FFFFFF;}<svg&nbsp;width="100"&nbsp;height="200"&nbsp;viewBox="-2&nbsp;-2&nbsp;202&nbsp;203"&nbsp;shape-rendering="geometricPrecision"&nbsp;preserveAspectRatio="none"> &nbsp;&nbsp;<g&nbsp;id="circle"> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;v-100&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;86.6025,50"&nbsp;/><text&nbsp;x="135"&nbsp;y="42.5"&nbsp;text-anchor="middle">1</text></a> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l86.6025,-50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;0,100"&nbsp;/><text&nbsp;x="170"&nbsp;y="105"&nbsp;text-anchor="middle">2</text></a> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l86.6025,50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;-86.6025,50"&nbsp;/><text&nbsp;x="135"&nbsp;y="170"&nbsp;text-anchor="middle">3</text></a> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;v100&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;-86.6025,-50"&nbsp;/><text&nbsp;x="65"&nbsp;y="170"&nbsp;text-anchor="middle">4</text></a> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l-86.6025,50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;0,-100"&nbsp;/><text&nbsp;x="27.5"&nbsp;y="105"&nbsp;text-anchor="middle">5</text></a> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l-86.6025,-50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;86.0025,-50"&nbsp;/><text&nbsp;x="65"&nbsp;y="42.5"&nbsp;text-anchor="middle">6</text></a> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="center"&nbsp;d="M100,100&nbsp;v-50&nbsp;a50,50&nbsp;1&nbsp;0,1&nbsp;0,100&nbsp;a50,50&nbsp;1&nbsp;0,1&nbsp;0,-100"&nbsp;/></a> &nbsp;&nbsp;</g></svg><svg&nbsp;width="200"&nbsp;height="100"&nbsp;viewBox="-2&nbsp;-2&nbsp;202&nbsp;203"&nbsp;shape-rendering="geometricPrecision"&nbsp;preserveAspectRatio="none"> &nbsp;&nbsp;<use&nbsp;xlink:href="#circle"&nbsp;/></svg><svg&nbsp;width="150"&nbsp;height="150"&nbsp;viewBox="-2&nbsp;-2&nbsp;202&nbsp;203"&nbsp;shape-rendering="geometricPrecision"&nbsp;preserveAspectRatio="none"> &nbsp;&nbsp;<use&nbsp;xlink:href="#circle"&nbsp;/></svg><svg&nbsp;width="100"&nbsp;height="100"&nbsp;viewBox="-2&nbsp;-2&nbsp;202&nbsp;203"&nbsp;shape-rendering="geometricPrecision"&nbsp;preserveAspectRatio="none"> &nbsp;&nbsp;<use&nbsp;xlink:href="#circle"&nbsp;/></svg><svg&nbsp;width="50"&nbsp;height="50"&nbsp;viewBox="-2&nbsp;-2&nbsp;202&nbsp;203"&nbsp;shape-rendering="geometricPrecision"&nbsp;preserveAspectRatio="none"> &nbsp;&nbsp;<use&nbsp;xlink:href="#circle"&nbsp;/></svg>