如何让这个 SVG 背景使用剪辑路径使其透明？

Question

我在网上找到了这个 svg，我想将其用作背景，但我想对其进行更改，以便在剪辑路径中使用由 所创建的线条，使它们透明并通过图案显示背景。

我没有 svgs 和剪辑路径的经验，所以我不知道该尝试什么。最终目标是拥有这种图案，但产生的线条是从矩形中剪切或透明的。

    <svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>
        <defs>
            <pattern id='a' patternUnits='userSpaceOnUse' width='69.141' height='40' patternTransform='scale(2) rotate(0)'>
                <rect x='0' y='0' width='100%' height='100%' fill='rgb(54, 54, 54)'/>
                <path d='M69.212 40H46.118L34.57 20 46.118 0h23.094l11.547 20zM57.665 60H34.57L23.023 40 34.57 20h23.095l11.547 20zm0-40H34.57L23.023 0 34.57-20h23.095L69.212 0zM34.57 60H11.476L-.07 40l11.547-20h23.095l11.547 20zm0-40H11.476L-.07 0l11.547-20h23.095L46.118 0zM23.023 40H-.07l-11.547-20L-.07 0h23.094L34.57 20z'  stroke-width='1' stroke='rgb(150, 0, 0)' fill='none'/>
            </pattern>
        </defs>
        <rect width='800%' height='800%' transform='translate(-44,0)' fill='url(#a)'/>
    </svg>

Answer 1

<svg viewBox="0 0" width='100%' height='100%' xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="myPattern" patternUnits='userSpaceOnUse' width='69.141' height='40' patternTransform='scale(2) rotate(0)'>
      <mask id="myMask">
        <path
          d='M69.212 40H46.118L34.57 20 46.118 0h23.094l11.547 20zM57.665 60H34.57L23.023 40 34.57 20h23.095l11.547 20zm0-40H34.57L23.023 0 34.57-20h23.095L69.212 0zM34.57 60H11.476L-.07 40l11.547-20h23.095l11.547 20zm0-40H11.476L-.07 0l11.547-20h23.095L46.118 0zM23.023 40H-.07l-11.547-20L-.07 0h23.094L34.57 20z'
          fill="white" stroke-width='2' stroke='black' />
      </mask>
      
      <rect x="0" y="0" width="100%" height="100%" fill="purple" mask="url(#myMask)" />
    </pattern>
  </defs>

  <rect x="0" y="0" width="100%" height="100%" fill="url(#myPattern)"/>
</svg>

这就是我如何实现我所追求的目标的。
首先，我必须使用蒙版而不是像我之前想象的那样使用剪辑路径。接下来，我必须将路径的描边设置为黑色，以便蒙版使轮廓透明，然后将填充设置为白色，以便它们是实心的。我将蒙版应用到一个矩形上，并将其填充设置为我想要的正方形颜色。将所有原始图案包裹起来，并将该图案应用到另一个矩形上进行显示。