如何创建仅顶部两角带圆角的SVG矩形？规避path变形问题

不需要必须转换成path，以下几种方案既能保留<rect>元素100%宽度自适应的特性，又能实现仅顶部带圆角的效果：

方法1：使用SVG 2原生圆角属性（现代浏览器推荐） #

SVG 2为<rect>提供了单独控制每个圆角的属性，直接设置顶部两个圆角即可，完全基于rect元素，自适应缩放不会变形。

示例代码：

<svg width="100%" height="100" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <rect 
    width="100%" 
    height="100%" 
    fill="#42b983"
    top-left-radius="20"
    top-right-radius="20"
    bottom-left-radius="0"
    bottom-right-radius="0"
  />
</svg>

注意：IE等旧浏览器不支持SVG 2属性，需兼容旧环境可选用下方方案。

方法2：使用clipPath裁剪（全浏览器兼容） #

通过<clipPath>定义仅顶部带圆角的自适应裁剪区域，再用普通<rect>填充，既保留rect的自适应特性，又实现目标效果。

示例代码：

<svg width="100%" height="100" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="top-rounded-clip">
      <!-- 用百分比坐标定义自适应的顶部圆角路径 -->
      <path d="M20,0 
               L100%-20,0 
               A20,20 0 0 1 100%,20 
               L100%,100% 
               L0,100% 
               L0,20 
               A20,20 0 0 1 20,0 Z" />
    </clipPath>
  </defs>
  
  <rect 
    width="100%" 
    height="100%" 
    fill="#42b983"
    clip-path="url(#top-rounded-clip)"
  />
</svg>

方法3：叠加多个rect元素（简单易理解） #

用一个带全圆角的顶部rect，加上一个底部矩形盖住底部的圆角，所有元素都是rect，自适应缩放无变形。

示例代码：

<svg width="100%" height="100" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 顶部圆角矩形（高度减去圆角半径） -->
  <rect 
    width="100%" 
    height="80" 
    fill="#42b983"
    rx="20"
    ry="20"
  />
  <!-- 底部矩形，盖住底部圆角区域 -->
  <rect 
    width="100%" 
    height="20" 
    y="80"
    fill="#42b983"
  />
</svg>

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