如何用指定SVG跨浏览器（不含IE）裁剪动态尺寸图片右上角？

是否存在一种跨浏览器（不含IE）的方案，能够使用指定SVG裁剪动态尺寸图片的右上角？最坏情况下可采用固定宽高比，但更倾向于尽可能灵活的实现方式。

提供的SVG代码 #

<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 43.45 43.45">
  <path fill="black" fill-rule="evenodd" d="M0 0v.05c1.15.11 2.24.6 3.06 1.42l38.93 39.06c.79.79 1.26 1.83 1.4 2.92h.06V0H0Z"/>
</svg>

裁剪说明 #

这不是直线裁剪，裁剪的角落带有圆角效果（放大后可见圆角细节），预期达成的效果为右上角带该圆角裁剪，其余角落可通过border-radius实现。

已尝试的方法 #

• 使用内联SVG进行裁剪/遮罩
• 用polygon裁剪右上角（尝试搭配独立圆角）
• Webkit遮罩 + 遮罩合成
• objectBoundingBox
• Border-image
• 其他更多方法

方案一：SVG遮罩（推荐，适配动态尺寸） #

利用SVG的<mask>结合CSS的mask属性，实现完全贴合原SVG曲线的动态裁剪：

1. 修改SVG为遮罩结构

<svg class="clip-mask" width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <mask id="corner-mask">
    <!-- 白色区域为保留显示的部分，黑色为裁剪隐藏的部分 -->
    <rect width="100%" height="100%" fill="white"/>
    <!-- 将原SVG路径反转到右上角位置 -->
    <path d="M100% 0v.05c-1.15.11-2.24.6-3.06 1.42l-38.93 39.06c-.79.79-1.26 1.83-1.4 2.92h-.06V0H100%Z" fill="black"/>
  </mask>
</svg>

2. CSS应用遮罩

.image-container {
  border-radius: 8px; /* 其余角落的圆角，按需调整 */
  mask: url(#corner-mask);
  -webkit-mask: url(#corner-mask);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

该方案通过mask-size: 100% 100%让遮罩完全适配容器的动态尺寸，无需固定宽高比，能精准还原原SVG的圆角曲线。

方案二：纯CSS渐变遮罩（无需SVG） #

如果不需要完全贴合原SVG的特殊曲线，可通过CSS径向渐变模拟圆角裁剪，适配动态尺寸：

.image-container {
  border-radius: 8px; /* 其余角落的圆角 */
  /* 右上角裁剪：径向渐变生成圆角遮罩，配合遮罩合成 */
  mask: 
    radial-gradient(circle at top right, transparent 12px, black 13px),
    linear-gradient(black, black);
  -webkit-mask: 
    radial-gradient(circle at top right, transparent 12px, black 13px),
    linear-gradient(black, black);
  mask-composite: source-in;
  -webkit-mask-composite: source-in;
}

其中12px为圆角半径，可按需调整，纯CSS实现，兼容性好，适合标准圆角裁剪场景。

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