CSS paint-order ทางนักวาด

คำอธิบายและการใช้งาน

paint-order คุณสมบัตินี้กำหนดลำดับวาดขององค์ประกอบ SVG หรือข้อความ

หมายเหตุ:สำหรับองค์ประกอบข้อความ เป็นไปได้เพียงการเปลี่ยนลำดับวาดของเขาสี (stroke) และการปิดที่ (fill) เท่านั้น เพราะที่หมาย (markers) ไม่มีความเกี่ยวข้อง

ตัวอย่าง

ตัวอย่าง 1

เปลี่ยนลำดับวาดของ SVG <circle> ซึ่งมีการทำนายกรายเปลี่ยนที่เป็นเงาสีเทา:

circle {
  paint-order: stroke fill;
}

ลองทดลองเอง

ตัวอย่าง 2

เปลี่ยนลำดับวาดของ SVG <text> ซึ่งมีการทำนายกรายเปลี่ยนที่เป็นเงาสีเทา:

text {
  paint-order: stroke fill;
}

ลองทดลองเอง

ระบบการเขียน CSS

paint-order: normal|ค่าเริ่มต้น|สองค่า|สามค่า|initial|inherit;

ค่าของคุณสมบัติ

ค่า รายละเอียด
normal ลำดับวาดเริ่มต้นด้วยการปิดที่ (fill), การวาดเขาสี (stroke), และหลังจากนั้นคือที่หมาย (markers)
ค่าเริ่มต้น

การวาดจะเริ่มตามค่าที่กำหนดและจะวาดต่อไปด้วยลำดับที่เรียบตามเริ่มต้น

ถ้ากำหนดแค่ "stroke" ก็คือกิจกรรมวาดต่อไปคือการปิดที่ (fill) และหลังจากนั้นคือที่หมาย (markers)
สองค่า

การวาดจะเริ่มตามค่าที่กำหนดและจะวาดต่อไปด้วยลำดับที่เรียบตามเริ่มต้น

ถ้ากำหนด "stroke markers" ก็คือกิจกรรมวาดต่อไปคือการปิดที่ (fill)
สามค่า การวาดจะทำตามค่าที่กำหนดมา
initial จะตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน。ดู: initial。
inherit มีความหมายว่าจะสืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของเขา。ดู: inherit。

รายละเอียดเทคนิค

ค่าเริ่มต้น: normal
การสืบทอด: yes
การสร้างอนุการ์： ไม่สนับสนุน。อ่านเพิ่มเติม：คุณสมบัติที่เกี่ยวข้องกับอนุการ์。
รุ่น: CSS3
ระบบการเขียน JavaScript: object.style.paintOrder="stroke fill"

การสนับสนุนเบราเซอร์

ตัวเลขในตารางแสดงความสามารถของเบราเซอร์ในการสนับสนุนคุณสมบัตินี้รุ่นแรกที่สนับสนุนเต็มที่。

Chrome Edge Firefox Safari Opera
35.0 17.0 60.0 8.0 22.0

หน้าที่เกี่ยวข้อง

ตัวอย่าง:วิธีเรียน SVG

ตัวอย่าง:กราฟิก HTML SVG