如何移除SVG中的红色区域，使其后方内容可见？

要实现移除SVG中的红色部分并显示section的橙色背景，只需做两处关键修改：

• 取消SVG中继承的红色填充，将原红色路径设为透明，让背景橙色透过这些区域显示
• 可保留白色矩形作为SVG的基础背景（若不需要白色背景，直接移除该矩形即可）

修改后的完整代码 #

CSS

* {
  padding: 0;
  margin: 0;
}
body {
  background: orange;
}

HTML

<section>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="transparent">
    <rect fill="#FFF" width="100%" height="100%"/>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 77 666.7 77 833.3 28 1000 28V0H0Z" opacity=".5"></path>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 70 666.7 70 833.3 16 1000 16V0H0Z" opacity=".5"></path>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 63 666.7 63 833.3 4 1000 4V0H0Z"></path>
  </svg>
</section>

说明 #

1. 将SVG的fill="#FF0000"改为fill="transparent"，所有路径默认填充为透明，直接露出下方的橙色背景
2. 保留<rect>元素可维持原SVG的白色背景区域，若不需要白色底，删除该元素即可
3. 路径的opacity属性保留，让透明区域呈现半透效果，与原视觉层次一致

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