如何使用SVG Squircle边框裁剪网页指定容器内的图片？

方法一：利用SVG <clipPath> 元素（推荐） #

这是最贴合你现有SVG Squircle结构的方案，直接将已有的Squircle形状定义为裁剪路径，再应用到图片上：

1. 把你的Squircle SVG代码放到<defs>标签内，定义成<clipPath>并赋予唯一ID：

<!-- 可以把这段SVG放在页面任意位置，width/height设为0避免占位 -->
<svg width="0" height="0" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 替换成你实际的Squircle路径代码 -->
    <clipPath id="squircle-clip">
      <path d="M40,0 C60,0 340,0 360,0 C380,0 400,20 400,40 L400,260 C400,280 380,300 360,300 L40,300 C20,300 0,280 0,260 L0,40 C0,20 20,0 40,0 Z" />
    </clipPath>
  </defs>
</svg>

2. 给图片容器内的图片添加CSS，应用裁剪路径：

.model-photo-block img {
  /* 引用定义好的裁剪路径 */
  clip-path: url(#squircle-clip);
  /* 确保图片填满容器，避免变形或留白 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

方法二：CSS mask-image 实现 #

如果不想修改现有SVG结构，可将Squircle转为内联SVG字符串，作为CSS遮罩使用：

.model-photo-block img {
  /* 替换path内的代码为你的Squircle路径 */
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><path d="M40,0 C60,0 340,0 360,0 C380,0 400,20 400,40 L400,260 C400,280 380,300 360,300 L40,300 C20,300 0,280 0,260 L0,40 C0,20 20,0 40,0 Z" fill="white"/></svg>');
  mask-size: cover;
  mask-repeat: no-repeat;
  /* 保证图片适配容器 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

方法三：直接在SVG中嵌入图片 #

如果你的区块本身就是SVG组件，可直接将图片作为SVG的<image>元素嵌入，并用Squircle裁剪：

<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="squircle-clip">
      <!-- 你的Squircle路径 -->
      <path d="M40,0 C60,0 340,0 360,0 C380,0 400,20 400,40 L400,260 C400,280 380,300 360,300 L40,300 C20,300 0,280 0,260 L0,40 C0,20 20,0 40,0 Z" />
    </clipPath>
  </defs>
  <!-- 嵌入目标图片，应用裁剪路径 -->
  <image xlink:href="your-image.jpg" width="400" height="300" clip-path="url(#squircle-clip)" />
  <!-- 可选：如果需要显示Squircle边框，添加一个相同路径的描边元素 -->
  <path d="M40,0 C60,0 340,0 360,0 C380,0 400,20 400,40 L400,260 C400,280 380,300 360,300 L40,300 C20,300 0,280 0,260 L0,40 C0,20 20,0 40,0 Z" fill="none" stroke="#000" stroke-width="2" />
</svg>

注意事项 #

• 确保SVG的viewBox尺寸与图片容器的实际尺寸匹配，避免裁剪形状变形
• object-fit: cover可以保证图片按比例填充容器，不会拉伸失真
• 以上方案均支持现代浏览器，若需兼容旧版IE，建议优先选用方法三

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