如何反转或反转星球大战缺口的剪辑 SVG？答案

【问题标题】：How to invert or reverse a clipped SVG of a Star Wars notch?如何反转或反转星球大战缺口的剪辑 SVG？
【发布时间】：2021-07-25 09:00:11
【问题描述】：

我试过了，但没有成功：

HTML：

<svg>
    <defs
     id="defs2">
    <clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipping">
      <path d="M0 0.5L20 21.5V103L0 124V0.5Z"/>
    </clipPath>
  </defs>
</svg>

<div class="left-notch">
  <div class="jyn">Jyn Erso</div>
</div>

CSS：

.jyn {
  background-color: rgba(237, 237, 237, 0.5);
  color: black;
  padding: 10px;
}

.left-notch
{
    background-image: url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2016/12/17/12/felicity-jones-jyn-erso.jpg);
    background-size: cover;
    border-top: 4px solid #BE002D;
    clip-path: url(#clipping);
    height: 300px;
    width: 500px;
    margin: 0 auto;
    margin-bottom: 20px;
}

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

但是结果，图片被剪裁了：

【问题讨论】：

改用这个路径：<path d="M0 0L0,88L20 109.5V189L0 210.5V300H500V0H0z"/>
如何像你一样转换成它？只需添加M0 0L0 和5V300H500V0H0z?
基本思想是不绘制图像中那些在剪切路径之外的部分。您只会看到剪切路径下的图像。为了更好地理解，请通过在具有图像宽度和高度或更大的 svg 元素内复制来绘制上述路径

标签： html css svg

【解决方案1】：

使用多边形

.jyn {
  background-color: rgba(237, 237, 237, 0.5);
  padding: 10px;
}

.left-notch {
  /* adjust this */
  --a:40px; /* control the height*/
  --b:10px; /* control the curve */
  --c:15px; /* control the width */
  /**/
  background: url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2016/12/17/12/felicity-jones-jyn-erso.jpg) center/cover;
  border-top: 4px solid #BE002D;
  clip-path: 
    polygon(0 0,100% 0,100% 100%,0 100%,
    0 calc(50% + var(--a)),var(--c) calc(50% + var(--a) - var(--b)),
    var(--c) calc(50% - (var(--a) - var(--b))),0 calc(50% - var(--a)));
  height: 300px;
  width: 500px;
  margin: 0 auto;
}

body {
 background:pink;
}

<div class="left-notch">
  <div class="jyn">Jyn Erso</div>
</div>

【讨论】：

响应式？我的意思是减少平板电脑和手机的缺口尺寸。我也想知道我是否可以向右、顶部或底部移动。