如何在svg中創建蒙版-有解無憂

我試過放兩個 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>

uj5u.com熱心網友回復：

默認情況下，蒙版只是掩蓋了所有內容 - 與使用高度和寬度為 100% 的黑色矩形創建蒙版相同。你的路徑有一個黑色填充，所以黑色黑色仍然是一個 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>

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

標籤：html css svg

上一篇：讓螢屏閱讀器讀出SVG圖形中的<text>項？

下一篇：SVG路徑滑鼠懸停不適用于傳單