如何在 svg 中创建蒙版答案

【问题标题】：How to create a mask in svg如何在 svg 中创建蒙版
【发布时间】：2021-12-01 15:41:14
【问题描述】：

我试过放两个 svg 元素来创建一个空心面具。我想创建像剪辑路径插图这样的效果，但结果不起作用。我该如何解决这个问题？或者有什么方法可以达到同样的效果？

https://codepen.io/penny289/pen/Exvaeaq?editors=1000

body{margin:0}
.aurora{
  width:100vw;
  height:100vh;
}

.move1,.move2,.move3{
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 100%;
  opacity: 0.7;
  border-radius:2%;
  z-index:-2;
}

.move1{
  box-shadow: 0 0 35vmax 35vmax #0D8BD9;
  
}
.move2{
  box-shadow: 0 0 35vmax 35vmax #0ff;
  
}
.move3{
  box-shadow: 0 0 35vmax 35vmax #94D7F2;
  
}

<div class="aurora">
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <mask id="mask1">
      <path fill="black" d="M51,-41.9C63.3,-25.1,68.8,-4.1,65.3,16.4C61.8,37,49.5,57,33.3,62C17.1,67.1,-2.8,57.2,-24.3,47.8C-45.8,38.5,-68.9,29.7,-74.5,14.3C-80.2,-1.1,-68.5,-23.2,-53.2,-40.7C-37.9,-58.1,-19,-70.8,0.2,-70.9C19.3,-71.1,38.6,-58.6,51,-41.9Z" />
    </mask>
    <rect width="100vw" height="100vh" fill="white" mask="url(#mask1)"></rect>
  </svg>
  <div class="move1"></div>
  <div class="move2"></div>
  <div class="move3"></div>
</div>

【问题讨论】：

我不太确定我是否理解你。如果您需要在蒙版矩形上切一个洞，您需要一个带有白色矩形的蒙版，后跟黑色填充路径。我也不会使用width="100vw" height="100vh"。我会使用width="200" height="200"，因为这将涵盖所有 svg 元素
@enxaneta 是的，我想在矩形上切一个洞。但我不明白它适用于剪辑路径而不是蒙版。
在蒙版中，您将看到白色区域下方出现的内容并切断黑色区域下方的内容。要切一个洞（正如我之前评论过的），您需要在黑色路径下放置一个白色矩形
您的意思是设置填充颜色为白色和黑色？或者我需要改变rect的位置

标签： html css svg

【解决方案1】：

默认情况下，蒙版只是屏蔽所有内容 - 与创建具有 100% 高度和宽度的黑色矩形的蒙版相同。你的路径有一个黑色填充，所以 black+black 仍然是一个 100% 黑色的蒙版。

我在遮罩中添加了一个白色矩形，这样您就可以看到遮罩与黑/白之间的区别。

然后你的路径有点偏左/上，所以我做了一个翻译把它放在 SVG 视图框内。

body{margin:0}
.aurora{
  width:100vw;
  height:100vh;
}

.move1,.move2,.move3{
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 100%;
  opacity: 0.7;
  border-radius:2%;
  z-index:-2;
}

.move1{
  box-shadow: 0 0 35vmax 35vmax #0D8BD9;
  
}
.move2{
  box-shadow: 0 0 35vmax 35vmax #0ff;
  
}
.move3{
  box-shadow: 0 0 35vmax 35vmax #94D7F2;
  
}

<div class="aurora">
  <svg viewBox="0 0 200 200" width="400" xmlns="http://www.w3.org/2000/svg">
    <mask id="mask1">
      <rect width="100%" height="100%" fill="white"/>
      <path transform="translate(90 80)" fill="black" d="M51,-41.9C63.3,-25.1,68.8,-4.1,65.3,16.4C61.8,37,49.5,57,33.3,62C17.1,67.1,-2.8,57.2,-24.3,47.8C-45.8,38.5,-68.9,29.7,-74.5,14.3C-80.2,-1.1,-68.5,-23.2,-53.2,-40.7C-37.9,-58.1,-19,-70.8,0.2,-70.9C19.3,-71.1,38.6,-58.6,51,-41.9Z" />
    </mask>
    <rect width="100vw" height="100vh" fill="white" mask="url(#mask1)"></rect>
  </svg>
  <div class="move1"></div>
  <div class="move2"></div>
  <div class="move3"></div>
</div>

【讨论】：