如何在svg中创建蒙版

Question

我试着把两个svg元素创建一个空心蒙版。我想创建clip-path inset的效果，但是效果不好。我怎么解决这个问题?或者有什么方法可以达到同样的效果?

https://codepen.io/penny289/pen/Exvaeaq?编辑= 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>

Answer 1

遮罩只是在默认情况下遮罩所有内容-与创建一个高度和宽度为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>