如何定位SVG并根据选择实现SVG的显示与隐藏？附示例代码

嘿，针对你提到的SVG定位和根据复选框选择控制显示隐藏的需求，结合你给出的代码片段，我来一步步拆解解决方案：

一、SVG的定位实现 #

要精准定位SVG，咱们可以借助CSS的定位属性来灵活控制，具体分两种常见场景：

1. 与复选框对齐布局 #

如果希望SVG和自定义复选框横向对齐，推荐用Flex布局优化父容器：

.checkbox-styled {
  display: flex;
  align-items: center;
  gap: 12px; /* 复选框和SVG之间的间距 */
  margin: 40px 0 0 0;
  float: left;
}

2. 自由悬浮定位 #

要是需要让SVG悬浮在页面某个特定位置，可以用绝对定位配合父容器的相对定位：

.checkbox-styled {
  position: relative; /* 作为SVG绝对定位的参照容器 */
  display: block;
  margin: 40px 0 0 0;
  float: left;
}

.custom-svg {
  position: absolute;
  top: -30px; /* 向上偏移30px */
  left: 60px; /* 向右偏移60px */
  width: 30px;
  height: 30px;
}

二、复选框控制SVG显示/隐藏 #

利用CSS的:checked伪类和兄弟选择器，就能实现选中复选框显示SVG、取消选中隐藏的效果：

1. 调整HTML结构 #

把SVG和复选框放在同一个标签容器下，确保CSS能关联到它们：

<label class="checkbox-styled">
  <input type="checkbox" id="svgToggle">
  <span>点击切换SVG</span>
  <!-- 这里放你的SVG内容 -->
  <svg class="custom-svg" viewBox="0 0 24 24">
    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="#fff"/>
  </svg>
</label>

2. 添加控制样式 #

通过CSS状态选择器实现显示隐藏逻辑：

/* 默认隐藏SVG */
.custom-svg {
  display: none;
}

/* 复选框选中时显示SVG */
.checkbox-styled input[type="checkbox"]:checked ~ .custom-svg {
  display: block;
}

三、完整整合代码示例 #

把以上调整融入你的原有代码，最终效果如下：

@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-family: lato;
  color: #fff;
  background: #999;
  padding: 55px 30px;
}
.checkbox-styled {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 40px 0 0 0;
  float: left;
}
.checkbox-styled input[type="checkbox"] {
  display: none;
}
/* 保留你原来的自定义复选框样式 */
.checkbox-styled input[type="checkbox"] + span {
  display: inline-block;
  padding: 8px 16px;
  background-color: #555;
  cursor: pointer;
  border-radius: 4px;
}
.checkbox-styled input[type="checkbox"]:checked + span {
  background-color: #2ecc71;
}
/* SVG控制样式 */
.custom-svg {
  position: absolute;
  top: -25px;
  left: 100px;
  display: none;
  width: 30px;
  height: 30px;
  fill: #2ecc71;
}
.checkbox-styled input[type="checkbox"]:checked ~ .custom-svg {
  display: block;
}

这样就能同时实现SVG的精准定位，以及通过复选框状态控制它的显示和隐藏啦。

内容的提问来源于stack exchange，提问作者Rickin Rathatha