स्ट्रोक-डैशऑफ़सेट - सीएसएस-ट्रिक्स

stroke-dashoffsetसीएसएस में संपत्ति एक एसवीजी पथ, जहां एक की पानी का छींटा के साथ स्थान को परिभाषित करता है strokeशुरू हो जाएगा। संख्या जितनी अधिक होगी, पथ के साथ आगे डैश शुरू हो जाएगा।

.module ( stroke-dashoffset: 100; )

याद कीजिए:

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

मूल्यों

stroke-dashoffsetसंपत्ति एक प्रतिशत या एक अंकीय मान स्वीकार कर सकते हैं।

• stroke-dashoffset: 100
• stroke-dashoffset: 25%

ध्यान दें कि इकाइयों (यानी emऔर px) की आवश्यकता नहीं है। पिक्सेल इकाइयों में इकाइयों के बिना एक संख्या प्रदान की जाती है। प्रतिशत वर्तमान व्यूपोर्ट के प्रतिशत के सापेक्ष है।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन स्ट्रोक-डैशऑफसेट संपत्ति देखें।

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

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

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

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

हम इस पोस्ट में इस तकनीक को और अधिक विस्तार से कवर करते हैं।

सम्बंधित

• stroke
• stroke-dasharray
• stroke-linecap
• stroke-width

अधिक जानकारी

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

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

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