移动端SVG Path区块曲线边框错位遮挡文本问题求助

问题根源 #

你的SVG曲线边框使用了固定像素坐标定义路径，大屏设备上容器尺寸充足，曲线相对内容位置合理；但移动端视口缩小后，固定坐标的曲线无法随容器比例自适应，导致相对位置偏移，最终遮挡内部文本。

解决方案 #

1. 改用百分比相对单位定义SVG路径

将SVG的viewBox设为0 0 100 100，让内部坐标按百分比映射，同时设置preserveAspectRatio="none"保证拉伸适配容器，曲线的控制点和终点都用相对比例值：

<svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="80">
  <path d="M0,20 C25,0 75,0 100,20 L100,100 L0,100 Z" fill="#你的区块背景色"/>
</svg>

SVG会随容器尺寸自动缩放，曲线相对区块的位置始终保持一致，不会出现偏移。

2. 用CSS媒体查询动态调整

如果需要保留部分固定逻辑，针对移动端媒体查询调整SVG高度或路径坐标：

/* 默认大屏样式 */
.curve-border {
  height: 80px;
}

/* 移动端适配（以768px为分界） */
@media (max-width: 768px) {
  .curve-border {
    height: 50px; /* 缩小SVG高度，调整曲线垂直位置 */
  }
  /* 或直接修改path的d属性（现代浏览器支持） */
  .curve-border path {
    d: path("M0,50 C150,0 350,0 500,50 L500,100% L0,100% Z");
  }
}

3. 替换为CSS clip-path实现曲线边框

对于简单曲线，用CSS clip-path替代SVG，完全基于百分比自适应，适配更简单：

.your-section {
  /* 多边形坐标按百分比定义，曲线效果与SVG一致 */
  clip-path: polygon(0 20%, 25% 0, 75% 0, 100% 20%, 100% 100%, 0 100%);
}

额外优化 #

给区块内部内容添加足够的内边距，确保文本与曲线边框之间有安全间距，即使有微小偏移也不会遮挡：

.section-inner-content {
  padding: 2rem 1rem 4rem; /* 根据曲线高度调整底部padding */
}

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