在 CSS 3 中画一个圆弧

Question

我想在 CSS 3 中用圆弧画一个圆，这样我就有 5 个点，每个点都可以是一个链接。我想用弧线做的原因是因为我想在用户悬停在一个点上时为弧线设置动画。例如，如果用户将鼠标悬停在第二个点上，则连接第一个和第二个点的线/弧具有填充动画。 有没有办法使用 CSS 或使用 SVG 更好？

.circle {
  position: relative;
  width: 530px;
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
}

.dot1 {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dot2 {
  top: 34.5%;
  left: 2%;
  transform: translate(-50%, -50%);
}
.dot3 {
  top: 34.5%;
  left: 98%;
  transform: translate(-50%, -50%);
}
.dot4 {
  top: 90%;
  left: 21%;
  transform: translate(-50%, -50%);
}
.dot5 {
  top: 90%;
  left: 79%;
  transform: translate(-50%, -50%);
}

<div class="circle">
<svg width="530" height="530" viewBox="0 0 530 530" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M265 529C410.803 529 529 410.803 529 265C529 119.197 410.803 1 265 1C119.197 1 1 119.197 1 265C1 410.803 119.197 529 265 529Z" stroke="#DDD7E3" />
<path d="M265 1L13.96 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M265 1L109.84 478.6" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M265 1L420.16 478.6" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M109.84 478.6L13.96 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M265 1L516.04 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M420.16 478.6L516.04 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M420.16 478.6L13.96 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M516.04 183.4H13.96" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M516.04 183.4L109.84 478.6" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M420.16 478.6H109.84" stroke="#DDD7E3" stroke-miterlimit="10"/>
</svg>

  <div class="dot dot1"></div>
  <div class="dot dot2"></div>
    <div class="dot dot3"></div>
    <div class="dot dot4"></div>
    <div class="dot dot5"></div>
</div>

Answer 1

您可以使用 svg 元素代替 div 作为点。或者，您可以使用 div。

我正在计算主圆上点的位置，并使用这些点的坐标来绘制弧线。

您可以尝试使用点的坐标重新绘制线条

请阅读代码中的cmets。

var SVG_NS = "http://www.w3.org/2000/svg";
var svg = document.querySelector("svg");

let points = [];
let arcs = [];
let c = { x: 265, y: 265 };// the center of the main circle
let r = 263;// the radius of the main circle
let n = 5;//number of points
let step = (2 * Math.PI) / n;// angle between each point

class Point {
  constructor(i) {
    this.p = {};
    this.p.cx = c.x + r * Math.cos(i);
    this.p.cy = c.y + r * Math.sin(i);
    this.p.r = 5;
    this.p.fill = "red";
    this.el = drawSVGelmt(this.p, "circle", circles);
  }
}


//create and push a new point on the points array
for (let i = -Math.PI / 2; i < (3 * Math.PI) / 2; i += step) {
  points.push(new Point(i));
}




for (let i = 0; i < points.length; i++) {
  let _i = i + 1 < points.length ? i + 1 : 0;
  let d = `M${points[i].p.cx},${points[i].p.cy}
           A${r}, ${r}, 0 0 1  ${points[_i].p.cx},${points[_i].p.cy}z`;
  let o = { d: d, fill: "skyBlue" };
  //create a new arc and push it to the arcs array for latter use
  arcs.push(drawSVGelmt(o, "path", arcsgroup));
}


//a function to draw a new svg element and append it to a parent
function drawSVGelmt(o, tag, parent) {
  let elmt = document.createElementNS(SVG_NS, tag);
  for (let name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}

svg{border:solid}

<svg width="530" height="530" viewBox="-5 -5 540 540" fill="none" xmlns="http://www.w3.org/2000/svg">
<path  d="M265 529C410.803 529 529 410.803 529 265C529 119.197 410.803 1 265 1C119.197 1 1 119.197 1 265C1 410.803 119.197 529 265 529Z" stroke="#f00" />
<path d="M265 1L13.96 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M265 1L109.84 478.6" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M265 1L420.16 478.6" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M109.84 478.6L13.96 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M265 1L516.04 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M420.16 478.6L516.04 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M420.16 478.6L13.96 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M516.04 183.4H13.96" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M516.04 183.4L109.84 478.6" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M420.16 478.6H109.84" stroke="#DDD7E3" stroke-miterlimit="10"/>
  
  
  <g id="arcsgroup"></g>  
  <g id="circles"></g>
</svg>