如何在 SVG 中切一个洞，使穿过该洞的每个 <path> 透明答案

【问题标题】：How can I cut a hole in an SVG, making every <path> that goes over that hole transparent如何在 SVG 中切一个洞，使穿过该洞的每个 <path> 透明
【发布时间】：2021-10-18 04:17:59
【问题描述】：

考虑以下示例：

  path {
            transform-origin: 50% 0%;
        }
        @keyframes path0 {
            0% {
                transform: rotate(-10deg);
            }
            100% {
                transform: rotate(10deg);
            }
        }
        @keyframes path1 {
            0% {
                transform: rotate(-30deg);
            }
            100% {
                transform: rotate(30deg);
            }
        }
        @keyframes path2 {
            0% {
                transform: rotate(40deg);
            }
            100% {
                transform: rotate(-40deg);
            }
        }
        .background--custom {
            height: 100%;
            width: 100%;
            background-color: red;
        }

<svg class="background--custom" id="demo" viewBox="0 0 100 100" preserveAspectRatio="none">
        <path fill="#D6D6D6" fill-opacity="1" d="M-100 -100L200 -100L200 50L-100 50Z" style="animation: path0 5s linear infinite alternate;" />
        <path fill="#DEFFFF" fill-opacity="1" d="M-100 -100L200 -100L200 50L-100 50Z" style="animation: path1 5s linear infinite alternate;" />
        <path fill="#DAFFF5" fill-opacity="1" d="M-100 -100L200 -100L200 20L-100 20Z" style="animation: path2 5s linear infinite alternate;" />
    </svg>

这将创建动画 SVG 背景。它看起来像这样：

它只是几行旋转。

目标是在整个 SVG 上切出一个矩形孔，使 SVG 的一部分变得透明。考虑到黑色矩形是洞，它应该看起来像这样：

这有可能吗？我曾尝试使用 mask 元素，但我不知道如何将这些掩码元素应用到整个 SVG 而不仅仅是单个 path 元素。

【问题讨论】：

这是在 svg 元素中打洞的方法：stackoverflow.com/questions/26462205/… 将组中的所有形状包裹起来并遮盖该组。也看看这个：stackoverflow.com/questions/55537606/…

标签： html svg

【解决方案1】：

在这里，我在<g> 元素上创建了一个<mask>，该元素在背景中具有白色<rect>，在前景中具有黑色<rect>。黑色方块使组透明。结果是你可以在背景中看到红色——不知道是不是重点？

path {
  transform-origin: 50% 0%;
}

@keyframes path0 {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

@keyframes path1 {
  0% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

@keyframes path2 {
  0% {
    transform: rotate(40deg);
  }
  100% {
    transform: rotate(-40deg);
  }
}

.background--custom {
  height: 100%;
  width: 100%;
  background-color: red;
}

<svg class="background--custom" id="demo" viewBox="0 0 100 100" preserveAspectRatio="none">
  <defs>
    <mask id="mask01">
      <rect width="100" height="100" fill="white"/>
      <rect width="60" height="60" x="20" y="40" fill="black"/>
    </mask>
  </defs>
  <g mask="url(#mask01)">
    <path fill="#D6D6D6" fill-opacity="1"
      d="M-100 -100L200 -100L200 50L-100 50Z"
      style="animation: path0 5s linear infinite alternate;" />
    <path fill="#DEFFFF" fill-opacity="1"
      d="M-100 -100L200 -100L200 50L-100 50Z"
      style="animation: path1 5s linear infinite alternate;" />
    <path fill="#DAFFF5" fill-opacity="1"
      d="M-100 -100L200 -100L200 20L-100 20Z"
      style="animation: path2 5s linear infinite alternate;" />
  </g>
</svg>

【讨论】：

这太棒了。像魅力一样工作。