如何让导航下划线SVG路径自适应视口且ECG元素不拉伸变形？

嘿，这个ECG样式的导航下划线创意真的超赞！我刚好有个简单靠谱的方案能帮你实现「中间ECG部分不挤压变形，两侧线条自动随导航项宽度缩短」的效果，咱们直接上干货：

核心思路 #

把下划线拆成三个独立模块：左侧线条 + 固定尺寸的ECG SVG + 右侧线条，用Flex布局让左右线条自动填充导航项的剩余宽度，中间的ECG保持固定尺寸，完全不会被挤压变形。

代码实现 #

HTML结构 #

给每个导航项加一个下划线容器，把三个部分嵌套进去：

<nav class="navbar">
  <a href="#" class="nav-item active">
    首页
    <div class="underline-wrapper">
      <span class="line left"></span>
      <svg class="ecg-svg" viewBox="0 0 40 20">
        <!-- 可根据需求调整ECG路径细节 -->
        <path d="M0 10 L5 10 L8 5 L11 15 L14 10 L17 10 L20 5 L23 15 L26 10 L30 10 L35 10" 
              stroke="#2563eb" fill="none" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span class="line right"></span>
    </div>
  </a>
  <a href="#" class="nav-item">
    我的项目
    <div class="underline-wrapper">
      <span class="line left"></span>
      <svg class="ecg-svg" viewBox="0 0 40 20">
        <path d="M0 10 L5 10 L8 5 L11 15 L14 10 L17 10 L20 5 L23 15 L26 10 L30 10 L35 10" 
              stroke="#2563eb" fill="none" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span class="line right"></span>
    </div>
  </a>
  <a href="#" class="nav-item">
    关于我
    <div class="underline-wrapper">
      <span class="line left"></span>
      <svg class="ecg-svg" viewBox="0 0 40 20">
        <path d="M0 10 L5 10 L8 5 L11 15 L14 10 L17 10 L20 5 L23 15 L26 10 L30 10 L35 10" 
              stroke="#2563eb" fill="none" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span class="line right"></span>
    </div>
  </a>
</nav>

CSS样式 #

用Flex布局让左右线条自动分配剩余空间，中间SVG固定尺寸：

.navbar {
  display: flex;
  gap: 2.5rem;
  padding: 1.5rem 2rem;
  background-color: #f8fafc;
}

.nav-item {
  position: relative;
  text-decoration: none;
  color: #334155;
  font-size: 1rem;
  padding-bottom: 0.75rem;
}

.underline-wrapper {
  display: flex;
  align-items: center;
  gap: 0.3rem; /* 线条和ECG之间的小间距，可选 */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.line {
  flex-grow: 1;
  height: 2px;
  background-color: #2563eb;
  opacity: 0; /* 非激活状态隐藏 */
  transition: opacity 0.2s ease;
}

.nav-item.active .line {
  opacity: 1;
}

.ecg-svg {
  width: 40px; /* 固定宽度，确保ECG不会被拉伸 */
  height: 20px;
  opacity: 0; /* 非激活状态隐藏 */
  transition: opacity 0.2s ease;
}

.nav-item.active .ecg-svg {
  opacity: 1;
}

原理说明 #

1. Flex布局的自适应能力：underline-wrapper作为Flex容器，左右两个.line设置了flex-grow:1，会自动平分导航项文字之外的剩余宽度，不管导航项是宽是窄，线条都会自适应调整长度。
2. 固定尺寸的SVG：给ecg-svg设置固定宽高，配合viewBox属性，保证ECG路径始终保持原始比例，完全不会被挤压变形。
3. 交互状态控制：通过.active类来切换下划线的显示/隐藏，还加了过渡动画让交互更流畅，符合导航栏的常规逻辑。

你可以根据自己的设计需求，调整SVG的路径样式、线条颜色、间距，甚至给激活状态加个滑动动画，轻松实现你草图里的理想效果！

内容的提问来源于stack exchange，提问作者D. Breidert