لنفترض أن لديك سطرًا في SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>يمكنك استخدام stroke-dasharray الخاصية في CSS لعمل شرطات:
line {
stroke-dasharray: 5;
}أن 5 القيمة هي وحدة نسبية بناءً على حجم SVG viewBox. يمكننا استخدام أي طول CSS ، حقًا. ولكن ما يفعله هو عمل نمط من الشرطات يبلغ طولها 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 وحدة إضافية لمنع النموذج من تجاوز نفسه.
هذا كل شئ.
🎩 قبعة تلميح إلى جوشوا دانس For استدعاء هذا!
