จัดแต่งทรงผมกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) ด้วย CSS

วันนี้เราจะพูดคุยกันเรื่องกราฟิคเวกเตอร์ที่ปรับขนาดได้ (Scalable Vector Graphic (SVG)) และในขณะที่เราได้กล่าวถึงในโพสต์ก่อนหน้านี้หนึ่งในข้อดีของการใช้ SVG คือมันสามารถถูกออกแบบด้วย CSS.

คุณสมบัติการออกแบบ SVG

SVG ในส่วนของการจัดแต่งทรงผมนั้นทำงานในลักษณะเดียวกันกับองค์ประกอบ HTML ปกติ แต่ในความเป็นจริงแล้วพวกเขาแบ่งปันคุณสมบัติทั่วไปด้วย อย่างไรก็ตามมีคุณสมบัติอื่น ๆ ที่มีวัตถุประสงค์เฉพาะสำหรับวัตถุ SVG ที่มีสเปคของตัวเองนอกเหนือจาก CSS.

ตัวอย่างเช่น, ในองค์ประกอบ HTML ปกติเราสามารถเพิ่มสีพื้นหลังได้ด้วย สีพื้นหลัง หรือ พื้นหลัง คุณสมบัติ CSS ใน SVG มันแตกต่างกันเล็กน้อย สีพื้นหลังถูกระบุด้วย ใส่ ทรัพย์สินแทน นอกจากนี้จะมีการระบุเส้นขอบขององค์ประกอบด้วย ลากเส้น ทรัพย์สินและไม่ได้อยู่กับ ชายแดน เหมือนที่เราทำใน HTML ปกติคุณสามารถดูรายการทั้งหมดได้ที่นี่.

หากคุณทำงานร่วมกับเครื่องมือแก้ไขเวกเตอร์เช่น Adobe Illustrator ค่อนข้างนานคุณสามารถคาดเดาได้อย่างรวดเร็วว่ากลไกการตั้งชื่อคุณสมบัติใน SVG นั้นมาจากโปรแกรมแก้ไข.

การใช้สไตล์ SVG

เราสามารถใช้หนึ่งในวิธีต่อไปนี้เพื่อจัดองค์ประกอบองค์ประกอบ SVG

คุณสมบัติการนำเสนอ

หากคุณเห็นรายการคุณสมบัติ SVG ทั้งหมดพวกเขาทั้งหมดสามารถเพิ่มได้โดยตรงบนองค์ประกอบเพื่อเปลี่ยนงานนำเสนอขององค์ประกอบ ตัวอย่างต่อไปนี้แสดงวิธีที่เราสามารถเพิ่ม ใส่ และ ลากเส้น โดยตรงบน ดูแลรักษา ธาตุ;

สี่เหลี่ยมผืนผ้าจะกลายเป็นเหมือนภาพหน้าจอด้านล่าง

สไตล์ชีทแบบอินไลน์

เรายังสามารถเพิ่มสไตล์ด้วย สไตล์ คุณลักษณะ ในตัวอย่างต่อไปนี้เราจะเพิ่มด้วย ใส่ และ ลากเส้น ไปที่ ดูแลรักษา, แต่คราวนี้เราเพิ่มมันเข้าไปใน สไตล์ และหมุนด้วย CSS3 แปลง คุณสมบัติเช่นนั้น.

สี่เหลี่ยมจะหมุนในผลลัพธ์เดียวกันเฉพาะเมื่อหมุนไปแล้วเท่านั้น

สไตล์ชีตภายใน

ฝังสไตล์ SVG ไว้ภายใน สไตล์ องค์ประกอบยังเป็นไปได้และไม่แตกต่างจากที่เราทำใน HTML ปกติ ตัวอย่างด้านล่างนี้แสดงวิธีที่เราเพิ่มสไตล์ภายในเพื่อให้มีผลกับองค์ประกอบ SVG .HTML เอกสาร.

อย่างไรก็ตาม SVG เป็นภาษาที่ใช้ XML ดังนั้นเมื่อเรากำลังจะเพิ่มสไตล์ชีทแบบอินไลน์ใน .SVG เอกสารเราต้องใส่การประกาศสไตล์ไว้ข้างใน CDATA, ดังนี้

CDATA ต้องมีที่นี่เนื่องจาก CSS สามารถมีได้ > อักขระที่จะขัดแย้งกับตัวแยกวิเคราะห์ XML การใช้ CDATA แนะนำอย่างยิ่งสำหรับสไตล์การฝังใน SVG แม้ว่าอักขระที่ขัดแย้งกันจะไม่ได้รับในสไตล์ชีต.

สไตล์ชีทภายนอก

สไตล์ชีตภายนอกยังใช้วิธีเดียวกันกับองค์ประกอบ SVG .HTML เอกสาร.

อีกครั้งค่ะ .SVG เอกสารเราจำเป็นต้องอ้างถึงสไตล์ชีตภายนอกเป็น XML-สไตล์ชีต, ชอบมาก.

องค์ประกอบการจัดกลุ่ม

องค์ประกอบ SVG สามารถจัดกลุ่มได้ด้วย ธาตุ. องค์ประกอบการจัดกลุ่มจะช่วยให้เราสามารถแบ่งปันสไตล์ทั่วไปให้กับองค์ประกอบทั้งหมดในกลุ่มนี่คือตัวอย่าง;

ทั้งสี่เหลี่ยมผืนผ้าและวงกลมจะมีผลลัพธ์เหมือนกัน.

ความคิดสุดท้าย

เราได้ผ่านทุกเรื่องที่สำคัญในการออกแบบ SVG ด้วย CSS และนี่เป็นเพียงหนึ่งในข้อดีของการให้บริการกราฟิกกับ SVG ในโพสต์ถัดไปเราจะพิจารณาอีกโพสต์ต่อไปดังนั้นโปรดติดตาม.

• ดูการสาธิต
• แหล่งดาวน์โหลด