我怎样才能在 SVG 中切一个洞，使每个 <path> 穿过那个洞透明

Question

考虑以下示例：

  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 元素。

Answer 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>

我怎样才能在 SVG 中切一个洞，使每个 <path> 穿过那个洞透明

How can I cut a hole in an SVG, making every <path> that goes over that hole transparent

html

svg