右侧定位带clip-path的伪元素宽度动画路径偏移问题求助

需求与场景 #

我有一个绝对定位元素，其::before伪元素设置了背景色和clip-path，用作后方元素的阴影。希望通过将伪元素宽度从100%动画过渡到0来移除阴影，且动画需要从左向右消失，因此给伪元素设置了right: 0。

现有问题 #

将伪元素宽度设为0时，裁剪路径会向右偏移。左侧的test-1是当前异常效果：悬停触发动画时，裁剪路径本该保持固定位置，却移到了元素右侧——看起来路径始终贴在元素左边界，左边界右移时会把路径向右推。我需要的是左边界右移，背景从左侧开始逐渐消失，剩余部分保持原位。右侧的test-2是反向的正确效果（从右到左消失），但我需要从左到右的版本。

代码示例 #

HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
    </head>
    <body>
        <div id="test-1" class="test"></div>
        <div id="test-2" class="test"></div>
        <div id="svg-container">
        <svg width="200" height="81" viewBox="0 0 200 81" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <path id="test-path" d="M144.5 16L181 1.00195H5L20.5 7.00022L23 19.5002L17.5 31.5L1 24.5V76.0007C1 80.0007 5 80.002 5 80.002H195C195 80.002 199 80.0007 199 76.0007L199 21.5019L189 38.5L168.5 43.5L150 31.5L144.5 16Z" stroke="#36B5A8" stroke-width="2" stroke-linejoin="round"/>
                <clipPath id="test-clip">
                    <use xlink:href="#test-path" />
                </clipPath>
            </defs>
        </svg>
    </body>
</html>

CSS代码 #

body {
    margin: 0;
    position: relative;
    min-height: 100vh;
}
.test {
  width: 200px;
  height: 80px;
    position: absolute;
    top: 100px;
}
.test:before {
    content: '';
    position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transition: width 5s linear;
  background-color: rgba(236,71,228, 0.7);
  clip-path: url(#test-clip);
}
.test:hover:before {
    width: 0;
}
#test-1 {
  left: 50px;
}
#test-1:before {
  right: 0;
}
#test-2 {
  left: 300px;
}
#test-2:before {
  left: 0;
}

已尝试无效方案 #

• 修改裁剪路径的clipPathUnits属性
• 修改background-position属性

猜测方向 #

可能与路径的绘制方式、起点位置有关。

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