javascript - 围绕圆形图像定位元素

Question

#absolute-canvas a {
  display: block;
  position: absolute;
  top: 50%; 
  left: 50%;
  width: 4em; 
  height: 4em;
  margin: -2em;
  border-radius: 100%;    
  background: black;
}
.deg0 { 
  transform: translate(12em);
} /* 12em = half the width of the wrapper */
.deg45 { 
  transform: rotate(45deg) translate(12em) rotate(-45deg);
}
.deg135 {
  transform: rotate(135deg) translate(12em) rotate(-135deg);
}
.deg180 { 
  transform: translate(-12em);
}
.deg225 { 
  transform: rotate(225deg) translate(12em) rotate(-225deg);
}
.deg315 { 
  transform: rotate(315deg) translate(12em) rotate(-315deg);
}

<section id="absolute-canvas">

  <img src="./images/logoWithShadow.png" id="logo" class="img-responsive animated zoomIn" alt="" title="СП ФИНКИ" />
  <div id="nav-container">
    <a href='#' class='deg0'></a>
    <a href='#' class='deg45'></a>
    <a href='#' class='deg135'></a>
    <a href='#' class='deg180'></a>
    <a href='#' class='deg225'></a>
    <a href='#' class='deg315'></a>
  </div>

</section>

我当前的解决方案有效，但是当图像缩小(尺寸减小)时，我想将圆圈保持在同一图像周围。我怎样才能做到这一点？

我想要完成的事情的图片:

中央的 div 是一张图片，实际上是一个圆圈。

Answer 1

使用 SVG <circle> 你可以这样做的元素:

body {
  margin: 0;
  height: 100vh;
  display: flex;
}
.circle-container {
  flex: 1;
}
.circle {
  color: #2F7285;
}
.circle--main {
  color: #5E66FF;
}

<svg class="circle-container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
  <circle class="circle circle--main" cx="50%" cy="50%" r="200" stroke="currentColor" stroke-width="6" fill="currentColor" />
  <circle class="circle circle--one" cx="50%" cy="20%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
  <circle class="circle circle--two" cx="75%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
  <circle class="circle circle--three" cx="75%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
  <circle class="circle circle--four" cx="50%" cy="80%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
  <circle class="circle circle--five" cx="25%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
  <circle class="circle circle--six" cx="25%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
</svg>

---

如果要包含图像，可以使用 SVG pattern .

body {
  margin: 0;
  height: 100vh;
  display: flex;
}
.circle-container {
  flex: 1;
}
.circle {
  color: #2F7285;
}

<svg class="circle-container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
  <defs>
    <pattern id="image" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 200 200">
      <image x="0%" y="0%" width="200" height="200" xlink:href="http://placehold.it/200x200"></image>
    </pattern>
  </defs>
  <circle class="circle circle--main" cx="50%" cy="50%" r="200" stroke-width="6" fill="url(#image)" />
  <circle class="circle circle--one" cx="50%" cy="20%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
  <circle class="circle circle--two" cx="75%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
  <circle class="circle circle--three" cx="75%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
  <circle class="circle circle--four" cx="50%" cy="80%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
  <circle class="circle circle--five" cx="25%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
  <circle class="circle circle--six" cx="25%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
</svg>

---

请记住，由于您使用的是相同的形状，而不是创建不同的元素，您可以创建一个 SVG Spritesheet 并使用 <use> 重用圆形形状标记，仅当每个圆元素没有更深层次的操作时。