SVG掩码或CSS样式敲掉SVG的中心，使其透明

Question

我有一个SVG，它本质上是一个边缘为圆形的盒子，每个边缘的角落都有边框：

<div class="container">
</div>
<svg width="258" height="258" viewBox="0 0 258 258" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M257 211.489L257 245C257 251.627 251.627 257 245 257L211.489 257" stroke="white" stroke-width="2" />
<path d="M211.489 0.999998L245 0.999999C251.627 1 257 6.37258 257 13L257 46.5111" stroke="white" stroke-width="2" />
<path d="M46.5111 257L13 257C6.37258 257 1 251.627 1 245L1.00001 211.489" stroke="white" stroke-width="2" />
<path d="M1 46.5111V13C1 6.37258 6.37258 1 13 1H46.5111" stroke="white" stroke-width="2" />
</svg>

它被放置在一个有彩色背景的容器div上：

body{background: white}
.container {
margin-top: 70px;
height: 400px;
margin: 0 auto;
background-color: black;
opacity: 0.55;
}
svg {
position: absolute;
top: 50px;
left: 300px;
}

我希望SVG的中心(白边边界内的整个中心区域(是透明的。在这个例子中，你会看到身体的白色背景。

这是它的CodePen：https://codepen.io/lance-p/pen/mdrwyyN

有人告诉我，我可以用口罩来实现这一点，但一直没能让它发挥作用。任何建议(带口罩或不带口罩(都将不胜感激！

Answer 1

这是一个替代解决方案，我使用非常宽的阴影而不是.container背景。

此外，我简化了svg，但您可以将代码保留在此处。

*{margin:0;padding:0}
body {
background: white;
}
.container {
margin-top: 70px;
height: 400px;
margin: 0 auto;
overflow: hidden;
opacity: 0.55;
}
#hole {/*I want the hole to be slightly smaller than the svg element hence the calc*/
width:calc(258px - 8px);
height:calc(258px - 8px);
border-radius:20px;
position: relative;
top: calc(50px + 4px);
left: calc(300px + 4px);
background:transparent;
box-shadow:0 0 0 200vmax #000;
}
svg{
width:258px;
height:258px;
position: absolute;
top: 50px;
left: 300px;
}

<div class="container">
<div id="hole"></div>
</div>
<svg width="258" height="258" viewBox="0 0 258 258" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="256" height="256" rx="20" id="r" stroke="white" stroke-width="2" stroke-dasharray="80 168" stroke-dashoffset="58" fill="none" />
</svg>

@Alexander_TT评论：

可以在描述中以某种方式突出显示用于定位白色角笔划dasharray＝"的主要解决方案；80 168〃；笔划dashoffset＝"；58〃；

首先，您需要知道圆角矩形的总长度。CCD_ 2。将该值除以4，即可得出笔划和间隙的总和：let stroke_gap = l/4;接下来，为笔划选择一个值，例如let stroke = 80。对于差距，你将使用let gap = stroke_gap - stroke;。我已经四舍五入了数字。也许我不应该。这给了我类似于stroke-dasharray="80 168"的东西。如果你只使用这个，第一个笔画将从离角20个单位(rx="20"(的距离开始(x="1"y="1"(。你需要一个stroke-dashoffset来抵消笔画并使它们在角处弯曲。

您可以计算路径拐角部分的长度：它是半径为20(rx=20(的圆周长的1/4的长度：let corner = 2 * Math.PI * radius/4;笔划dashoffset的值应该是let sdo = stroke/2 + corner/2

let l = r.getTotalLength();
let radius = 20;
let stroke_gap = l/4;
let stroke = 80;
let gap = stroke_gap - stroke;
let corner = 2 * Math.PI * radius/4;
let sdo = stroke/2 + corner/2;
r.setAttribute("stroke-dasharray",`${stroke} ${gap}`)
r.setAttribute("stroke-dashoffset",sdo)

<svg viewBox="0 0 258 258" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="256" height="256" rx="20" stroke="gold" stroke-width="5" fill="none" />
<rect x="1" y="1" width="256" height="256" rx="20" id="r" stroke="black" stroke-width="2"  fill="none" />
<path d="M1,21A20 20 0 0 1 21,1" stroke="red" fill="none" id="corner" />
</svg>