保持剪辑路径多边形的形状并添加孔效果

Question

您好，我想使用孔效果创建加载动画（我真的不知道如何调用它）。最终目标是隐藏大部分页面，除了屏幕中间的洞（我在第一个屏幕截图中实现）到目前为止，我设法让它工作，但它根本没有响应，我使用了一个剪辑路径在我的背景上并在中间形成一个洞，如下所示：

clip-path: polygon(0% 0%, 0% 100%, 30% 100%, 50% 35%, 50% 35%, 59% 65%, 0% 65%, 30% 100%, 100% 100%, 100% 0%)

编辑：为了更清楚，我第一次尝试使用了 2 个元素，一个 div 是黑色背景，一个 svg 是中心的三角形

你可以看到我的粉红色 SVG 形状的三角形保持它的比例，但背景没有。

我找到了一篇解释 svg Clippath 的文章并尝试使用它，但我的形状没有居中，因为我的 svg 使用的是路径或多边形，并且无法指示 cx cy 属性。

但是是否有一个我不知道的 css 属性可以隐藏重叠的红色三角形和黑色背景以创建一个洞？ （像反向溢出：隐藏）

所以我都尝试了，但找不到解决方案，有没有办法做到这一点？或者也许还有其他方法，我还没有考虑过。

#shape {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    transform: translate(-50% , -50%);
    overflow: visible;
  }

  .triangle_shape{
    fill:#894747;
  }

  .triangle {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    transform-origin: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    }

 

  .hide {
    z-index: 9;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #131211;
    }

    .hide_triangle {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 350px;
      height: 350px;
      background-color: red;
      transform: translate(-50% , -50%);
      clip-path: url(#hidden_shape);
    }


  #loading_triangle {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    transform: translate(-50% , -50%);
    overflow: visible;
  }

  .cls-1 {
    fill:none;
    stroke:#ff3864;
    stroke-width: 3px;
    stroke-miterlimit:10;
    stroke-dashoffset: 0;
    stroke-dasharray: 1000;
    transform-origin: center;
  }

<div class="hide">
    <div class="hide_triangle"></div>
  </div>

  <svg id="shape" data-name="Shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.44 210.83" width="350px" height="350px">
    <title>hide</title>
    <clipPath id="hidden_shape">
<!--      <path class="triangle_shape" x=".5" y=".5" d="M121.89 0 0 211.12 243.77 211.12 121.89 0 0 211.12 243.77 211.12 121.89 0z" />-->
    <polygon class="triangle_shape" x="0.5" y="0.5"  points="121.89 0 0 211.12 243.77 211.12 121.89 0 0 211.12 243.77 211.12 121.89 0"/>
    </clipPath>

  </svg>

  <svg id="loading_triangle" data-name="loading triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.44 210.83" width="350px" height="350px">
    <title>loading</title>
    <polyline class="cls-1" points="22.26 180.06 124.48 3 138.53 27.34"/>
    <polyline class="cls-1" points="143.37 35.71 246.37 214.12 211.33 214.12"/>
    <polyline class="cls-1" points="200.17 214.12 2.6 214.12 17.43 188.43"/>
    <!--    <path class="cls-1" d="M14.1 187.12 0.86 210.33 242.58 210.33 121.72 1 32.81 154.99"/>-->
  </svg>

Answer 1

您可以只使用一个，而不是使用 2 个 svg 元素，其中外部三角形上的间隙是用 stroke-dashoffset 偏移的 stroke-dasharray 的间隙。

内部三角形是外部三角形的副本，用transform="scale(.6)"按比例缩小

svg{
border:1px solid;
display:block;
position:absolute;
margin: auto;
width:350px;
top:0;
bottom:0;
left:0;
right:0;
}

<svg id="shape" data-name="Shape" xmlns="http://www.w3.org/2000/svg" viewBox="-123.24 -142  246.5 214" >
  <defs>
    <polygon id="poly" points="0 -140 121.244 70 -121.244 70 0 -140"/>
  </defs>
  
  <use xlink:href="#poly" stroke-width="3" stroke="red" fill="none" stroke-dasharray="230 12.487548828125" stroke-dashoffset="200" />
  <use xlink:href="#poly" transform="scale(.6)" fill="red" />
</svg>