Javascript 如何创建一个在其轴的最末端包含元素的圆？_Javascript_Css_React Native

Javascript 如何创建一个在其轴的最末端包含元素的圆？

javascript css react-native

Javascript 如何创建一个在其轴的最末端包含元素的圆？,javascript,css,react-native,Javascript,Css,React Native,我将使用一些SVG，它们将是轴上的化身。现在我所需要的只是一个关于如何在每个轴的最末端设置这些化身的提示我正努力做到这一点：这是我目前掌握的代码：身体{ 背景色：de4e40；文本对齐：居中；证明内容：中心；对齐项目：居中；高度：100vh；宽度：100vw；保证金：0；显示器：flex； } .方形装载机{ 高度：200px；宽度：200px；背景色：白色；边框：1px纯黑；边界半径：50%； } 使你成为一个相对的父母使用“平移”、“顶部”和“左侧”将图元放置

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

我正努力做到这一点：

这是我目前掌握的代码：

身体{ 背景色：de4e40；文本对齐：居中；证明内容：中心；对齐项目：居中；高度：100vh；宽度：100vw；保证金：0；显示器：flex； } .方形装载机{ 高度：200px；宽度：200px；背景色：白色；边框：1px纯黑；边界半径：50%； } 使你成为一个相对的父母使用“平移”、“顶部”和“左侧”将图元放置在拐角处尽可能共享样式在CSS变量中存储重复的偏移量值：根{ -偏移量：-1.4em； } 身体{ 背景色：de4e40；文本对齐：居中；证明内容：中心；对齐项目：居中；高度：100vh；宽度：100vw；保证金：0；显示器：flex； } .方形装载机{ 高度：200px；宽度：200px；背景色：白色；边框：1px纯黑；边界半径：50%；位置：相对位置； } .img{ 位置：绝对位置；宽度：50px； } .1、.3{ 左：50%；转化：translateX-50%； } .2、.4{ 最高：50%；转化：translateY-50%； } .一{ 顶部：var偏移量； } .二{ 右：var抵销； } .三{ 底部：var偏移量； } .4{ 左：var偏移量； } 使你成为一个相对的父母使用“平移”、“顶部”和“左侧”将图元放置在拐角处尽可能共享样式在CSS变量中存储重复的偏移量值：根{ -偏移量：-1.4em； } 身体{ 背景色：de4e40；文本对齐：居中；证明内容：中心；对齐项目：居中；高度：100vh；宽度：100vw；保证金：0；显示器：flex； } .方形装载机{ 高度：200px；宽度：200px；背景色：白色；边框：1px纯黑；边界半径：50%；位置：相对位置； } .img{ 位置：绝对位置；宽度：50px； } .1、.3{ 左：50%；转化：translateX-50%； } .2、.4{ 最高：50%；转化：translateY-50%； } .一{ 顶部：var偏移量； } .二{ 右：var抵销； } .三{ 底部：var偏移量； } .4{ 左：var偏移量； }

如果我正确理解了您的帖子，您希望使用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的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>

在前面的示例中，所有四个化身都被赋予50px的高度和宽度

.avatarN的顶部位置为-25px，因为这是图像高度的一半，左侧位置为75px，是.squareLoader宽度的一半减去图像宽度的一半

.avatarW的顶部位置为.squareLoader高度的一半减去图像高度的一半，左侧位置为25px，即图像高度的一半

其他部门也是如此

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

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

还有，这是他们关于CSS中位置值的页面：

无论您是否使用flexbox，您仍然必须使用position属性来获取所需的图像。

如果我正确理解您的帖子，您需要将SVG图像放置在带有CSS的圆圈的北、南、东、西点上；使用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的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>

在前面的示例中，所有四个化身都被赋予50px的高度和宽度

.avatarN的顶部位置为-25px，因为这是图像高度的一半，左侧位置为75px，是.squareLoader宽度的一半减去图像宽度的一半

.avatarW的顶部位置为.squareLoader高度的一半减去图像高度的一半，左侧位置为25px，即图像高度的一半

其他部门也是如此

如果要根据页面大小调整.squareLoader的大小，并根据页面大小调整图像的大小，则可以使用calc CSS函数，该函数可用于 Y CSS中允许使用长度单位

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

还有，这是他们关于CSS中位置值的页面：

你是否使用Frasbox，你仍然需要使用Posile属性来获得你想要的图片。

< P>一个想法是只考虑背景，处理起来更容易：

身体{ 背景色：de4e40；文本对齐：居中；证明内容：中心；对齐项目：居中；高度：100vh；宽度：100vw；保证金：0；显示器：flex； } .方形装载机{ 高度：250px；宽度：250px；背景： urlhttps://picsum.photos/50/50?image=1069 上中锋， urlhttps://picsum.photos/50/50?image=1069 底部中心， urlhttps://picsum.photos/50/50?image=1069 左中， urlhttps://picsum.photos/50/50?image=1069 右中， /*圆圈*/ 最远侧的径向梯度， fff calc100%-32px，000 calc100%-30px， 000 calc100%-30px，000 calc100%-20px，透明钙100%-18px；背景重复：无重复； }

一个想法是只考虑背景，更容易处理：

我喜欢使用翻译，很好！我喜欢使用翻译，很好！