如何用多路径SVG形状裁剪CSS元素？

一、使用clip-path实现（优先推荐） #

核心是把多路径SVG定义在<clipPath>中，再绑定到目标元素上，注意SVG的结构和属性设置：

1. 定义裁剪用的SVG（隐藏SVG本体，只保留裁剪定义）

<svg width="0" height="0" viewBox="0 0 500 500">
  <defs>
    <clipPath id="multiPathClip">
      <!-- 这里放入你的所有多路径，确保路径闭合（结尾加Z） -->
      <path d="M50,50 L250,50 L200,200 L0,200 Z" />
      <path d="M300,300 L450,300 L450,450 L300,450 Z" />
    </clipPath>
  </defs>
</svg>

2. 给目标元素应用裁剪

.target-content {
  width: 500px;
  height: 500px;
  background: #ccc; /* 对应你说的灰色区域 */
  clip-path: url(#multiPathClip);
}

二、用mask属性兜底（兼容更多场景） #

如果clip-path不生效，试试遮罩方案，通过SVG的<mask>定义显示区域：

1. 定义遮罩SVG

<svg width="0" height="0" viewBox="0 0 500 500">
  <defs>
    <mask id="multiPathMask">
      <!-- 黑色背景：隐藏所有区域；白色路径：显示对应区域 -->
      <rect width="100%" height="100%" fill="black" />
      <!-- 放入你的多路径，填充白色 -->
      <path d="M50,50 L250,50 L200,200 L0,200 Z" fill="white" />
      <path d="M300,300 L450,300 L450,450 L300,450 Z" fill="white" />
    </mask>
  </defs>
</svg>

2. 应用遮罩到目标元素

.target-content {
  width: 500px;
  height: 500px;
  background: #ccc;
  mask: url(#multiPathMask);
  -webkit-mask: url(#multiPathMask); /* 兼容Chrome、Safari等webkit内核浏览器 */
}

三、常见问题排查 #

• 不要用display: none隐藏SVG，改用width:0; height:0; position:absolute;，否则浏览器无法解析内部的裁剪/遮罩定义
• 必须给SVG设置viewBox属性，且尺寸比例要和目标元素一致，避免裁剪区域拉伸错位
• 确保所有路径都是闭合的（路径指令结尾加Z），否则clip-path无法正确识别有效区域
• 如果用外部SVG文件，要解决跨域问题（本地测试无影响，线上需同源或配置CORS）

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