Html 如何反转或反转《星球大战》凹口的剪裁SVG？

我试过了，但没有成功：

HTML:

Jyn Erso

CSS:

.jyn{
背景色：rgba（237,237,237,0.5）；
颜色：黑色；
填充：10px；
}
.左槽口
{
背景图片：url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2016/12/17/12/felicity-jones-jyn-erso.jpg);
背景尺寸：封面；
边框顶部：4px实心#BE002D；
剪辑路径：url（#剪辑）；
高度：300px；
宽度：500px；
保证金：0自动；
边缘底部：20px；
}

我希望图像有一个透明的星球大战缺口：

但结果是图像被剪裁和剪切：

使用多边形

.jyn{
背景色：rgba（237,237,237,0.5）；
填充：10px；
}
.左槽口{
/*调整这个*/
--a:40px；/*控制高度*/
--b:10px；/*控制曲线*/
--c:15px；/*控制宽度*/
/**/
背景：url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2016/12/17/12/felicity-jones-jyn-erso.jpg)中心/盖；
边框顶部：4px实心#BE002D；
剪辑路径：
多边形（0 0100%0100%100%，0 100%，
0计算（50%+var（--a）），var（--c）计算（50%+var（--a）-var（--b）），
var（--c）计算值（50%-（var（--a）-var（--b）），0计算值（50%-var（--a））；
高度：300px；
宽度：500px；
保证金：0自动；
}
身体{
背景：粉红色；
}

Jyn Erso

使用多边形

.jyn{
背景色：rgba（237,237,237,0.5）；
填充：10px；
}
.左槽口{
/*调整这个*/
--a:40px；/*控制高度*/
--b:10px；/*控制曲线*/
--c:15px；/*控制宽度*/
/**/
背景：url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2016/12/17/12/felicity-jones-jyn-erso.jpg)中心/盖；
边框顶部：4px实心#BE002D；
剪辑路径：
多边形（0 0100%0100%100%，0 100%，
0计算（50%+var（--a）），var（--c）计算（50%+var（--a）-var（--b）），
var（--c）计算值（50%-（var（--a）-var（--b）），0计算值（50%-var（--a））；
高度：300px；
宽度：500px；
保证金：0自动；
}
身体{
背景：粉红色；
}

Jyn Erso

改用此路径：

如何像您那样转换为它？只需添加

M0 0L0

和

5V300H500V0H0z

？基本思想是不绘制图像中位于剪裁路径之外的部分。您将只看到剪辑路径下的图像。为了更好地理解，请通过在svg元素中复制图像的宽度和高度来绘制上述路径，或者使用此路径：

如何像您那样转换为它？只需添加

M0 0L0

和

5V300H500V0H0z

？基本思想是不绘制图像中位于剪裁路径之外的部分。您将只看到剪辑路径下的图像。为了更好地理解，请通过在svg元素中复制图像的宽度和高度或更大来绘制上述路径。它是否响应？我的意思是减少平板电脑和手机上的缺口大小。我还想知道我是否可以移动到右边，顶部还是底部。它是否响应？我的意思是减少平板电脑和手机上的缺口大小。我还想知道我是否可以移动到右边，顶部或底部。