SVG मास्क या CSS स्टाइल 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;
}
मैं चाहता हूं कि एसवीजी (सफेद किनारे वाली सीमाओं के भीतर का पूरा केंद्र क्षेत्र) का केंद्र पारदर्शी हो। तो इस उदाहरण में आपको शरीर की सफेद पृष्ठभूमि दिखाई देगी।
यहाँ इसका एक कोड है: https://codepen.io/lance-p/pen/mdrwyyN
मुझे बताया गया था कि मैं इसे प्राप्त करने के लिए एक मुखौटा का उपयोग कर सकता हूं लेकिन काम करने के लिए इसे प्राप्त करने में सक्षम है। किसी भी सुझाव (एक मुखौटा के साथ या बिना) की सराहना की जाएगी!
जवाब
यह एक वैकल्पिक समाधान है जहां मैं .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 टिप्पणी कर रहा है:
किसी तरह से सफेद कोनों स्ट्रोक-दशहरा = "80 168" स्ट्रोक-डैशऑफ़सेट = 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") की दूरी (एक्स = "1" y = "1") में शुरू हो जाएगा तुम एक की आवश्यकता होगी stroke-dashoffset
करने के लिए स्ट्रोक को ऑफसेट करें और उन्हें कोनों के चारों ओर मोड़ दें।
आप पथ के कोने भाग की लंबाई की गणना कर सकते हैं: यह त्रिज्या के साथ वृत्त की परिधि का 1/4 भाग = 20 (rx = 20) है: let corner = 2 * Math.PI * radius/4;
स्ट्रोक-डैशऑफसेट का मान होना चाहिए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>