如何在SVG中切出一個洞，使穿過該洞的每個<path>透明-有解無憂

考慮以下示例：

  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 中切出一個洞，使穿過該洞的每個 <path> 透明

它只是幾條旋轉的線。

目標是在整個 SVG 中切出一個矩形孔，使 SVG 的一部分變為透明。考慮到黑色矩形將是孔，它應該看起來像這樣：

如何在 SVG 中切出一個洞，使穿過該洞的每個 <path> 透明

這有可能嗎？我曾嘗試使用mask元素，但我不知道如何將這些掩碼元素應用于整個 SVG 而不僅僅是單個path元素。

uj5u.com熱心網友回復：

在這里，我在一個背景為白色，前景為黑色<mask>的<g>元素上做了一個。黑色方塊使組透明。結果是你可以在背景中看到紅色——我不知道這是不是重點？<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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/323280.html

標籤：html svg

上一篇：如何定位SVG？

下一篇：圓上的SVG文本-更改文本方向