含SVG的纯HTML/CSS手风琴激活时SVG错位问题求助

问题说明 #

我尝试制作一款仅使用HTML和CSS的手风琴组件，并添加了SVG图标。组件功能正常，但激活checkbox时，设置了rotateX(180deg)的SVG会向下偏移，脱离label区域进入content区域，希望SVG能留在label内原地完成旋转。

原代码 #

CSS #

.container,
label {
  background-color: var(--green);
  padding: 10px;
}

label {
  position: relative;
  display: block;
}

label:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

label svg {
  position: absolute;
  right: 5px;
  top: 50%;
  bottom: 0%;
  transform: translateY(-50%);
  transition: 0.5s;
}

.radio {
  display: none;
}

.radio:checked~label svg {
  transform: rotateX(180deg);
}

.content {
  display: none;
}

.radio:checked~.content {
  display: block;
}

HTML #

<div class="container">
  <div>
    <input type="checkbox" name="author-contact" id="1" class="radio" />
    <label for="1" class="label">How can i contact the author
      <svg width="100" height="50">
     <polygon points="90,20 100,30 80,30"/>
   </svg>
      </label>
    <p class="content">
      Donec dapibus risus tincidunt eros congue feugiat. Etiam pharetra sit amet ex vestibulum mattis. Aliquam erat volutpat. Fusce mattis, nibh at auctor malesuada, lacus dolor sodales nibh, et porttitor dui purus a ipsum. Aliquam venenatis mollis pretium.
      Etiam quis commodo lectus. Donec ac augue sit amet nisl aliquet dictum ut vel nunc. Nulla porta condimentum dolor, ut hendrerit turpis viverra sit amet. Fusce vel est quam. Quisque porttitor facilisis risus in lacinia. Proin laoreet mi ac libero
      venenatis, sed ornare eros vehicula.
    </p>
  </div>
</div>

解决方案 #

问题核心是：激活checkbox时，transform: rotateX(180deg)覆盖了初始的transform: translateY(-50%)，导致SVG失去垂直居中定位，进而偏移。同时多余的bottom: 0%会影响SVG的尺寸计算，加剧偏移。

修改后的CSS代码：

.container,
label {
  background-color: var(--green);
  padding: 10px;
}

label {
  position: relative;
  display: block;
}

label:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

label svg {
  position: absolute;
  right: 5px;
  top: 50%;
  /* 移除多余的bottom属性，避免高度计算异常 */
  transform: translateY(-50%);
  transition: 0.5s;
  /* 设置旋转中心为自身中心，确保旋转更稳定 */
  transform-origin: center;
}

.radio {
  display: none;
}

.radio:checked~label svg {
  /* 合并垂直居中和旋转变换，保留原有定位 */
  transform: translateY(-50%) rotateX(180deg);
}

.content {
  display: none;
}

.radio:checked~.content {
  display: block;
}

修改说明 #

1. 移除bottom: 0%：仅通过top: 50% + transform: translateY(-50%)即可实现SVG垂直居中，bottom:0%会强制SVG高度撑满label，可能导致旋转时布局异常。
2. 合并变换属性：在checked状态下同时保留translateY(-50%)和rotateX(180deg)，确保SVG旋转时维持垂直居中位置，不会偏移出label区域。
3. 添加transform-origin: center：可选但推荐，明确SVG以自身中心为旋转轴，避免因默认旋转中心导致的位置偏差。

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