Clip-path显示变形求助：为何裁剪路径高度被压缩？

核心原因 #

出现这种高度压缩变形，本质是SVG裁剪路径的坐标系与目标div的宽高比例不匹配，浏览器在映射裁剪路径时强制拉伸/压缩了SVG，导致最终裁剪效果变形。具体触发点通常有两个：

• SVG的viewBox属性宽高比和目标div的369:247不一致，浏览器自动缩放SVG适配div边界，打乱了裁剪路径的比例。
• SVG未设置preserveAspectRatio属性，默认缩放规则会优先填满容器而非保持原始比例，进而导致裁剪路径变形。

修复步骤 #

1. 校准SVG的viewBox比例
   确保SVG根元素的viewBox宽高比严格等于div的369/247。如果原始SVG设计尺寸就是369px×247px，直接设置：

   <svg viewBox="0 0 369 247" xmlns="http://www.w3.org/2000/svg">
     <!-- 你的裁剪路径（<clipPath>或<path>元素） -->
   </svg>
   

   若原始SVG是其他尺寸，只需保证viewBox的宽高比与369:247一致即可（比如原始尺寸为738×494，viewBox设为0 0 738 494）。

2. 添加preserveAspectRatio属性
   在SVG根元素上明确设置preserveAspectRatio="xMidYMid meet"，强制浏览器保持SVG的宽高比例，避免被拉伸：

   <svg viewBox="0 0 369 247" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
     <!-- 裁剪路径内容 -->
   </svg>
   

3. 清理SVG冗余尺寸属性
   移除SVG根元素上固定的width和height属性（或设置为100%），让SVG自适应目标div的尺寸，同时依靠viewBox和preserveAspectRatio维持正确比例。

验证效果 #

调整后再应用clip-path，浏览器会按照div的宽高比例正确映射SVG裁剪路径，不会再出现高度压缩的变形问题。

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