मान लें कि आपके पास एसवीजी में एक पंक्ति है:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>आप का उपयोग कर सकते हैं stroke-dasharray सीएसएस में संपत्ति डैश बनाने के लिए:
line {
stroke-dasharray: 5;
}कि 5 मूल्य एसवीजी के आकार के आधार पर एक सापेक्ष इकाई है viewBox. हम वास्तव में किसी भी सीएसएस लंबाई का उपयोग कर सकते हैं। लेकिन यह जो करता है वह डैश का एक पैटर्न बनाता है जो 5 यूनिट लंबा होता है और उनके बीच 5 यूनिट गैप होता है।
अब तक सब ठीक है. हम दो मानों का उपयोग कर सकते हैं जहां दूसरा मान व्यक्तिगत रूप से अंतराल की लंबाई निर्धारित करता है:
अब हमारे पास डैश हैं जो 5 इकाइयाँ हैं और अंतराल 10 हैं। आइए एक तीसरा मान आज़माएँ:
देखें कि हम यहां एक पैटर्न कैसे बना रहे हैं? यह चलता है:
- डैश: 5 इकाइयां
- गैप: 10 इकाइयां
- डैश: 15 इकाइयां
आपको लगता है कि यह उसके बाद ठीक उसी ताल में दोहराता है। लेकिन नहीं! अगर ऐसा होता, तो हमारे पास एक दूसरे से टकराते हुए डैश होते:
- डैश: 5 इकाइयां
- गैप: 10 इकाइयां
- डैश: 15 इकाइयां
- डैश: 5 इकाइयां
- गैप: 10 इकाइयां
- डैश: 15 इकाइयां
- …और इसी तरह।
इसके बजाय, stroke-dasharray सभी स्मार्ट हो जाते हैं और पैटर्न की नकल करते हैं यदि विषम संख्या में मान हैं तो…
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;यही कारण है कि वास्तव में एक ही मूल्य काम करता है! इससे पहले, हमने सिंगल घोषित किया था 5 मूल्य। यह वास्तव में कहने जैसा ही है stroke-dasharray: 5 5. दूसरे मूल्य के बिना, stroke-dasharray दोहराए जाने योग्य पैटर्न प्राप्त करने के लिए पहले मान को स्पष्ट रूप से डुप्लिकेट करता है। अन्यथा, यह केवल 5 इकाइयों की लंबी डैश की एक ठोस रेखा होगी, लेकिन उनके बीच कोई अंतराल नहीं होगा!
पैटर्न भी आकार के आकार पर ही निर्भर करता है। हमारा एसवीजी line 500 यूनिट है। चलो बड़ा सेट करें stroke-dasharray मान और उन्हें जोड़ें:
stroke-dasharray: 10 20 30 40 50; /* 150 units */यदि पैटर्न चार बार चलता है (150 इकाइयां 4 पुनरावृत्तियों), तो हम कुल 600 इकाइयों के साथ काम कर रहे हैं। पैटर्न को खुद से बहने से रोकने के लिए अतिरिक्त 100 इकाइयों को बंद कर दिया जाता है।
बस इतना ही।
टोपी टिप जोशुआ नृत्य एसटी इसे बुला रहे हैं!
