如何实现双击触发含SVG的bar div展开与收起效果？

核心思路 #

放弃transform: scaleY()，改用容器高度变化+类名切换的方式实现——既不会让SVG变形，又能通过JS轻松控制状态。关键是利用CSS过渡动画实现平滑展开/收缩，同时通过overflow:hidden控制内容显示。

修改后的完整代码 #

HTML

把circle放到bar内部，这样容器展开时自然露出圆形：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Double Click Drop down</title>
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <div id="divItem"></div>
  <div class="bar">
    <img src="SVG/bar.svg" alt="圆角矩形">
    <div class="circle"></div>
  </div>

  <script src="./script.js"></script>
</body>
</html>

CSS

添加过渡动画、状态类，控制容器高度和圆形显示：

#divItem{
  width: 150px;
  height: 150px;
  background-color: green;
  cursor: pointer;
  position: relative;
  left: 55px;
}

.bar{
  width: 160px;
  height: 60px; /* 对应SVG原高度 */
  overflow: hidden; /* 隐藏容器外的内容 */
  transition: height 0.3s ease; /* 平滑过渡动画 */
  position: relative;
}

/* 展开状态的容器高度：原高度+100px */
.bar.expanded{
  height: 160px;
}

.bar img{
  display: block;
  width: 100%;
  height: auto;
}

.circle{
  width: 50px;
  height: 50px;
  clip-path: circle();
  background-color: blue;
  position: absolute;
  left: 55px;
  top: 70px; /* 放在SVG下方，初始被容器隐藏 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 展开时显示圆形 */
.bar.expanded .circle{
  opacity: 1;
}

JS

监听双击事件，切换容器的状态类：

const divItem = document.getElementById('divItem');
const bar = document.querySelector('.bar');

divItem.addEventListener('dblclick', () => {
  bar.classList.toggle('expanded');
});

关键说明 #

1. 避免SVG变形：scaleY()会拉伸整个SVG元素（包括描边和圆角），而修改容器高度只是让容器向下扩展，SVG本身尺寸完全不变。
2. 类名切换逻辑：JS只负责触发类名的添加/移除，所有样式和动画都交给CSS处理，代码结构更清晰，也方便后续调整样式。
3. 平滑过渡：通过transition属性给高度和透明度变化添加动画，让展开/收缩过程更自然。
4. 双击触发：把原click事件改为dblclick，符合需求的双击触发逻辑。

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