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>

@alexandr_TT가 댓글을 달았습니다.

설명에서 흰색 모서리를 배치하는 주요 솔루션을 어떻게 든 강조 표시 할 수 있습니다. stroke-dasharray = "80 168"stroke-dashoffset = "58"

먼저 모서리가 둥근 직사각형의 전체 길이를 알아야합니다. let l = r.getTotalLength();. 이 값을 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;. stroke-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>