如何创建一个在其轴的尽头具有元素的圆？

Question

我将使用一些SVG，它们将是轴上的那些化身。现在，我需要提示的是如何在每个轴的末端设置这些头像。

我正在努力实现这一目标：

这是我到目前为止的代码：

body {
  background-color: #de4e40;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
}

.squareLoader {
  height: 200px;
  width: 200px;
  background-color: white;
  border: 1px solid black;
  border-radius: 50%;
}

<div class='squareLoader'></div>

这是codepen，以备您查看。

有没有指南或有人可以帮助我实现这一目标？ 我可以使用flexbox，也可以使用React Native。以防万一。

Answer 1

• 让squareLoader为亲戚
• 使用translate，top，left
的转角位置元素
• 尽可能共享样式
• 将重复的偏移值存储在CSS变量中

:root {
  --offset: -1.4em;
}

body {
  background-color: #de4e40;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
}

.squareLoader {
  height: 200px;
  width: 200px;
  background-color: white;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

.squareLoader img {
  position: absolute;
  width: 50px;
}


.one, .three {
  left: 50%;
  transform: translateX(-50%);
}

.two, .four {
  top: 50%;
  transform: translateY(-50%);
}

.one {
  top: var(--offset);
}

.two {
  right: var(--offset);
}

.three {
  bottom: var(--offset);
}

.four {
  left: var(--offset);
}

<div class="squareLoader">
  <img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="one">
  <img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="two">
  <img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="three">
  <img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="four">
</div>

https://jsfiddle.net/uf2t5p6r/3/

Answer 2

如果我正确理解了您的信息，则希望使用CSS将SVG图像放置在圆的北，南，东和西点上；使用CSS绝对可以做到这一点，但这完全取决于容器的大小和所使用图像的大小。

您提供的示例圆具有设定的高度和宽度，因此，假设您的SVG图像也是设定的大小，并且不会随页面大小变化，则可以执行以下操作。

body {
  background-color: #de4e40;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
}

.squareLoader {
  /* added 'position: relative', because parent elements of absolute positioned elements have to be positioned to prevent mayhem */
  position: relative;
  height: 200px;
  width: 200px;
  background-color: white;
  border: 1px solid black;
  border-radius: 50%;
}

.avatar {
  position: absolute;
  left: 75px;
  top: 75px;
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

.avatarN {
  top: -25px;
}

.avatarS {
  top: 175px;
}

.avatarE {
  left: 175px;
}

.avatarW {
  left: -25px;
}

和带有.avatar <div> s的HTML（您可以将SVG图像粘贴在这些div中）：

<div class='squareLoader'>
    <div class="avatar avatarN"></div>
    <div class="avatar avatarS"></div>
    <div class="avatar avatarE"></div>
    <div class="avatar avatarW"></div>
</div>

在前面的示例中，所有四个化身<div>的高度和宽度均为50px。

.avatarN的{​​{1}}位置为top，因为它是图像高度的一半，而-25px的位置为left（{{1的一半}}的宽度减去图片宽度的一半。

75px的{​​{1}}位置为.squareLoader（一半.avatarW的高度减去图像高度的一半）和top位置为{ {1}}，即图像高度的一半。

其他div依此类推。

如果您要根据页面大小调整75px .squareLoader的大小，并根据页面大小调整图像的大小，则可以使用calc（）CSS函数，该函数可在任何地方使用CSS中允许使用长度单位。

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

w3Schools对CSS中允许的所有单位都做了相当不错的粗略解释：

https://www.w3schools.com/cssref/css_units.asp

而且，这也是他们有关CSS位置值的页面：

https://www.w3schools.com/cssref/pr_class_position.asp

无论您是否正在使用flexbox，仍然必须使用position属性将图像获取到所需位置。

Answer 3

创建它的一个想法是仅考虑背景，并且更容易处理：

body {
  background-color: #de4e40;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
}

.squareLoader {
  height: 250px;
  width: 250px;
  background:
    url(https://picsum.photos/50/50?image=1069) top center,
    url(https://picsum.photos/50/50?image=1069) bottom center,
    url(https://picsum.photos/50/50?image=1069) left center,
    url(https://picsum.photos/50/50?image=1069) right center,
    /*the circle*/
    radial-gradient(farthest-side, 
      #fff calc(100% - 32px),#000 calc(100% - 30px),
      #000 calc(100% - 30px),#000 calc(100% - 20px),
      transparent calc(100% - 18px));
  background-repeat:no-repeat;
}

<div class='squareLoader'></div>