CSS clip-path的path()无法随元素拉伸，如何实现与url()一致的缩放效果？

clip-path: path() 默认使用绝对值坐标，不支持自动缩放的核心原因是没有匹配SVG中clipPathUnits="objectBoundingBox"的坐标映射逻辑，你可以通过以下两种方式实现和url()引入SVG裁剪一致的自适应拉伸效果：

方法1：使用高版本浏览器支持的path()坐标盒参数（推荐） #

Chrome 111+、Firefox 114+、Safari 16.4+ 版本已支持为path()指定坐标系统，你只需要将路径坐标归一化为0~1范围的相对值，再追加objectBoundingBox声明即可：

.path {
  /* 路径直接复用你SVG里的归一化坐标 */
  clip-path: path('M0.5,1 C 0.5,1,0,0.7,0,0.3 A 0.25,0.25,1,1,1,0.5,0.3 A 0.25,0.25,1,1,1,1,0.3 C 1,0.7,0.5,1,0.5,1 Z') objectBoundingBox;
}

该写法效果和内联SVG裁剪完全一致，路径会自动跟随元素宽高拉伸适配。

方法2：修复data URI格式的SVG裁剪写法 #

你之前用data URI的方式不生效，通常是漏了SVG命名空间声明、clipPathUnits配置或者裁剪路径锚点导致的，正确写法如下：

.path {
  clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CclipPath id='heartClip' clipPathUnits='objectBoundingBox'%3E%3Cpath d='M0.5,1 C 0.5,1,0,0.7,0,0.3 A 0.25,0.25,1,1,1,0.5,0.3 A 0.25,0.25,1,1,1,1,0.3 C 1,0.7,0.5,1,0.5,1 Z'/%3E%3C/clipPath%3E%3C/svg%3E#heartClip");
}

该写法兼容所有支持clip-path的浏览器版本，无需担心兼容性问题。

内容的提问来源于stack exchange，提问作者Maxwell s.c