สมมติว่าคุณมีสายใน SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>คุณสามารถใช้ stroke-dasharray คุณสมบัติใน CSS เพื่อสร้างขีดกลาง:
line {
stroke-dasharray: 5;
}ที่ 5 ค่าเป็นหน่วยสัมพัทธ์ตามขนาดของ SVG's 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 เรียกสิ่งนี้ออกมา!
