การทำงานกับข้อความในกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG)

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

ลองตรวจสอบดู.

การใช้งานขั้นพื้นฐาน

แต่ก่อนที่เราจะไปต่อไปเรามาดูกันว่า ข้อความใน SVG เกิดขึ้นในระดับพื้นฐานมาก:

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

แหล่งที่มาของภาพ: Wikipedia.org

และนี่คือลักษณะของข้อความ ตอนนี้ดูเหมือนว่าจะไม่มีความแตกต่างกับข้อความปกติใน HTML.

ลักษณะข้อความพื้นฐาน

ข้อความยังสามารถจัดรูปแบบด้วยคุณสมบัติ CSS เช่น font-weight, รูปแบบตัวอักษร, และ ตกแต่งข้อความ ซึ่งสามารถนำมาใช้ได้ทั้งผ่าน แบบอินไลน์สไตล์ภายใน หรือ ภายนอกสไตล์ เหมือนที่เราได้กล่าวถึงในโพสต์ก่อนหน้าเกี่ยวกับ สไตล์ SVG พร้อม CSS. นี่คือตัวอย่างบางส่วน.

กล้า

 นี่คือข้อความในกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) 

ตัวเอียง

 นี่คือข้อความตัวเอียงใน Scalable Vector Graphic (SVG) 

ขีดเส้นใต้

 นี่คือข้อความที่ขีดเส้นใต้ในกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) 

ธาตุ

ในบางกรณีเมื่อเราต้องการใช้สไตล์หรือแอตทริบิวต์กับส่วนเฉพาะของข้อความเท่านั้นเราสามารถใช้ . ตัวอย่างด้านล่างนี้แสดงวิธีการที่เราเพิ่ม กล้า, ตัวเอียง และ ขีดเส้นใต้ ถึงข้อความบรรทัดเดียว.

 นี่เป็นตัวหนา, นี่คือตัวเอียง และ นี่คือขีดเส้นใต้ 

โหมดการเขียน

ข้อความไม่เพียง แต่ถูกเขียนขึ้นมา จากซ้ายไปขวา. ในส่วนอื่น ๆ ของโลกญี่ปุ่นยกตัวอย่างเช่นข้อความที่เขียนขึ้น ด้านบนลงด้านล่าง. ใน SVG สามารถทำได้โดยใช้เครื่องหมาย เขียนโหมด คุณลักษณะ.

 ぁぃぅぇぉかき  

ในตัวอย่างข้างต้นเราได้ใส่อักขระญี่ปุ่นแบบสุ่มหลายตัว (ไม่ถามความหมายของฉันฉันไม่รู้จริงๆ) และเปลี่ยนการวางแนวด้วยการประกาศสไตล์นี้, โหมดการเขียน: tb, ที่ไหน วัณโรค ยืนสำหรับ ด้านบนลงด้านล่าง.

โครงร่างข้อความ

ข้อความใน SVG นั้นเป็นกราฟิก, เพื่อให้เราสามารถใช้ ลากเส้น คุณลักษณะเพื่อเพิ่มเส้นขอบให้กับ Text เหมือนกับที่เราทำกับรูปร่างอื่น.

ในตัวอย่างโค้ดข้างต้นเราได้เพิ่ม ลากเส้น คุณลักษณะของ องค์ประกอบและลบสีข้อความโดยการระบุ ใส่ คุณลักษณะของ ไม่มี ซึ่งจะส่งผลในการนำเสนอข้อความต่อไปนี้.

เส้นทางข้อความ

ใน SVG ข้อความไม่เพียงสามารถแสดงในแนวนอนและแนวตั้งเท่านั้น แต่ยังสามารถแสดงได้ ตามรูปแบบเส้นทาง. นี่คือวิธีที่จะทำ.

อันดับแรกเราต้องกำหนด เส้นทาง. อย่างไรก็ตามการสร้างเส้นทางโดยตรงใน HTML นั้นไม่ใช่เรื่องง่ายเราต้องเข้าใจพิกัดและคำสั่งบางอย่างซึ่งฉันมั่นใจว่าพวกเราส่วนใหญ่จะพยายามหลีกเลี่ยง ดังนั้นเพื่อให้ขั้นตอนนี้ง่ายขึ้นฉันแนะนำให้เปิดโปรแกรมแก้ไขเวกเตอร์ (Inkscape หรือ Illustrator) เป็นการส่วนตัวสร้างเส้นทางและสร้างรหัส SVG.

จากนั้นใส่ องค์ประกอบภายใน ธาตุ. defs ที่นี่หมายถึงความหมาย.

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

    Lorem ipsum dolor sit amet consectetur.   

อ่านเพิ่มเติม: เส้นทาง SVG

ไล่ระดับข้อความ

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

ก่อนอื่นเราต้องกำหนดสีไล่ระดับสี.

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

 ลาด 

และนี่คือข้อความที่มีการไล่ระดับสี.

อ่านเพิ่มเติม: การไล่ระดับสี SVG และรูปแบบ

อ้างอิงเพิ่มเติม

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

• เกี่ยวกับ Fonts in SVG - Divya Manian
• เอกสารทางการของ SVG Text - W3.org
• SVG Dovumentation ที่ Mozilla Dev เครือข่ายที่มีตัวอย่างและเครื่องมือ - MDN
• คุณสมบัติโหมดการเขียน SVG - MDN

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