स्ट्रोक-दशहरा - सीएसएस-ट्रिक्स

stroke-dasharrayसीएसएस में संपत्ति एसवीजी आकार के स्ट्रोक में डैश बनाने के लिए है। संख्या जितनी अधिक होगी, स्ट्रोक में डैश के बीच की जगह उतनी ही अधिक होगी।

.module ( stroke-dasharray: 5; )

याद कीजिए:

• यह एक प्रस्तुति विशेषता को ओवरराइड करेगा
• यह एक इनलाइन शैली को ओवरराइड नहीं करेगा उदा

मूल्यों

stroke-dasharrayसंपत्ति किसी भी लम्बाई स्वीकार कर सकते हैं, unitless मान सहित:

• stroke-dasharray: 2
• stroke-dasharray: 2.5
• stroke-dasharray: 2em
• stroke-dasharray: 15%

यूनिटलेस मान संभवतः सबसे आम विकल्प हैं, क्योंकि यह आम तौर पर एसवीजी मूल्यों के साथ होता है। वे लंबाई इकाइयाँ बन जाते हैं जो समन्वय प्रणाली के सापेक्ष होती हैं viewBox।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन स्ट्रोक-दशहरा प्रॉपर्टी देखें।

साथ मुश्किल हो रही है stroke-dasharray

क्या आपने कभी उन शांत डेमो को देखा है जहां एक एसवीजी आकार खुद को आकर्षित करता है? यह एक चाल है जो stroke-dasharrayएक तत्व को लेता है और stroke-dashoffsetसंपत्ति के साथ संयोजन में इसे एनिमेट करता है।

.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )

कोडपेन पर एसवीजी लाइन ड्राइंग, बैकवर्ड एंड फॉर द क्रिस बेयर (@chriscoyier) का पेन बेसिक उदाहरण देखें।

हम इस पोस्ट में इस तकनीक को और अधिक विस्तार से कवर करते हैं। यह IE 11 की तरह दिखता है और नीचे @keyframes के साथ स्ट्रोक गुण को एनिमेट करना पसंद नहीं करता है, इसलिए वहां सावधान रहें।

सम्बंधित

• stroke
• stroke-dashoffset
• stroke-linecap
• stroke-width

अधिक जानकारी

• एसवीजी 1.1 कल्पना
• भरता और स्ट्रोक पर एमडीएन

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
हाँ	हाँ	हाँ	हाँ	9+	4.4+ है	हाँ