将元素定位在圆形图像周围

Question

＆＃13;

＆＃13;

#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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我当前的解决方案有效但是当图像缩小（尺寸减小）时，我希望将圆圈保持在同一图像周围。我怎么能做到这一点？

我想要完成的事情的图像：

中央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>标记的圆形，只有在每个圆圈没有更深层次的操作时元件。