اسٹروک ڈیشرے پیٹرنز کیسے کام کرتے ہیں۔

کہو کہ آپ کے پاس SVG میں ایک لائن ہے:

<svg>
  <line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>

آپ استعمال کر سکتے ہیں stroke-dasharray ڈیش بنانے کے لیے سی ایس ایس میں پراپرٹی:

line {
  stroke-dasharray: 5;
}

کہ 5 قدر SVG کے سائز پر مبنی ایک رشتہ دار اکائی ہے۔ 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 یونٹ لمبی ہے، لیکن ان کے درمیان کوئی فاصلہ نہیں ہے!

پیٹرن بھی شکل کے سائز پر منحصر ہے. ہمارا SVG line 500 یونٹس ہے۔ آئیے بڑا سیٹ کریں۔ stroke-dasharray اقدار اور ان کو شامل کریں:

stroke-dasharray: 10 20 30 40 50; /* 150 units */

اگر پیٹرن چار بار چلتا ہے (150 یونٹس ⨉ 4 تکرار)، ہم کل 600 یونٹس کے ساتھ کام کر رہے ہیں۔ پیٹرن کو خود بہہ جانے سے روکنے کے لیے اس اضافی 100 یونٹس کو بند کر دیا گیا ہے۔

یہ سب ہے.

🎩 ٹوپی ٹپ ٹو جوشوا ڈانس لیے اسے باہر بلا رہا ہے!