SVG'nin merkezini şeffaf hale getirmek için SVG maskesi veya CSS stili
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
Bu, .container
arka 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-dashoffset
iç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>