SVG'nin merkezini şeffaf hale getirmek için SVG maskesi veya CSS stili

Dec 18 2020

Esasen her kenarın köşelerinde yuvarlatılmış kenarları ve sınırları olan bir kutu olan bir SVG'ye sahibim:

<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>

Renkli bir arka plana sahip bir kapsayıcı div üzerine yerleştirilir:

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'nin merkezinin (beyaz kenarlı kenarlıklar içindeki tüm merkez alan) şeffaf olmasını istiyorum. Yani bu örnekte vücudun beyaz arka planını göreceksiniz.

İşte bunun bir CodePen'i: https://codepen.io/lance-p/pen/mdrwyyN

Bunu başarmak için bir maske kullanabileceğim söylendi ama işe yaramadı. Herhangi bir öneri (maskeli veya maskesiz) takdir edilecektir!

Yanıtlar

3 enxaneta Dec 18 2020 at 17:23

Bu, .containerarka plan yerine çok geniş bir gölge kullandığım alternatif bir çözümdür .

Ayrıca svg'yi basitleştirdim ama kodunuzu burada tutabilirsiniz.

*{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 yorum yapıyor:

Açıklamada beyaz köşeleri konumlandırmak için ana çözümü bir şekilde vurgulayabilir mi? Strok-dasharray = "80 168" strok-dashoffset = "58"

Önce yuvarlatılmış köşeli rektin toplam uzunluğunu bilmeniz gerekir. let l = r.getTotalLength();. Bir kontur ve boşluğun toplamını bilmek için bu değeri 4'e bölersiniz: let stroke_gap = l/4;Daha sonra, örneğin kontur için bir değer seçersiniz let stroke = 80. Kullanacağınız boşluk let gap = stroke_gap - stroke;için sayıları yuvarladım. Belki yapmamalıyım. Bu bana böyle bir şey veriyor stroke-dasharray="80 168"Bir gerekecektir köşesinden 20 birim (rx = "20") bir mesafe (x = "1" y = "1") başlayacak sadece bu ilk inmesini kullanıyorsanız stroke-dashoffsetiçin vuruşları dengeleyin ve köşelerin etrafında bükmelerini sağlayın.

Yolun köşe kısmının uzunluğunu hesaplayabilirsiniz: Yarıçap = 20 (rx = 20) olan bir dairenin çevresinin 1 / 4'ü kadar uzunluktur: let corner = 2 * Math.PI * radius/4;Çizgi-çizgi ofset değeri şöyle olmalıdırlet 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>