如何同时实现CSS clip-path动画效果与响应式适配？

需求背景 #

需要为可拖拽轮播元素添加clip-path动画：拖拽时从矩形平滑过渡为带曲边的形状，同时元素需具备响应式自适应尺寸的特性，但无法同时实现clip-path动画与响应式适配。

尝试过的方案及问题 #

1. CSS path语法的clip-path（可动画但无响应式） #

使用CSS的path()语法定义clip-path，可通过transition实现平滑动画，hover状态示例如下：

<div class="testshape"></div>

.testshape {
    clip-path: path("m 37,0 h 535 c 0,0 0.21081,92.5 0.21081,238 C 572.21081,383.5 572,476 572,476 H 37 C 37,476 35.688413,367.39046 35.688413,239.39046 35.688413,111.39046 37,0 37,0 Z");
    background-color: red;
    transition: all .2s;
    aspect-ratio: 572/476;
    width: 100%;

    &:hover {
        clip-path: path("M37 0H572C572 0 549.5 92.5 549.5 238C549.5 383.5 572 476 572 476H37C37 476 0 366 0 238C0 110 37 0 37 0Z");
    }
}

问题：path中的坐标为固定像素值，元素尺寸变化时，clip-path形状无法自适应缩放，不具备响应式特性。

2. 内联SVG的clipPath（响应式但无法动画） #

使用带有clipPathUnits="objectBoundingBox"的内联SVG定义clip-path，可实现响应式适配，但CSS无法对url(#shape)形式的clip-path切换添加过渡动画，切换时为瞬间变化：

<div class="testshape"></div>

<svg width="0" height="0">
    <defs>
        <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
            <polygon points="0 1, 0 0, 1 0, 0.8 1" />
        </clipPath>

        <clipPath id="clip-shape-2" clipPathUnits="objectBoundingBox">
            <polygon points="0 .5, 0 0, 1 0, 0.1 .5" />
        </clipPath>
    </defs>
</svg>

.testshape {
    clip-path: url("#clip-shape");
    background-color: red;
    transition: all .2s;
    aspect-ratio: 572/476;
    width: 100%;

    &:hover {
       clip-path: url("#clip-shape-2");
    }
}

问题：CSS仅能识别clip-path的URL引用，无法对两个不同clipPath的形状进行平滑过渡动画。

3. 百分比值的polygon（响应式动画但无曲边） #

使用百分比坐标的polygon()语法可实现响应式动画，但polygon仅支持直边，无法创建曲边形状，满足不了需求。

核心疑问 #

能否在clip-path的path语法中使用相对百分比值，从而同时实现响应式与平滑动画？

最终解决方案 #

使用GSAP的MorphSVG插件结合遮罩实现了需求，可同时满足曲边形状的平滑过渡与响应式适配。

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