ความคิดเห็น: หนึ่งในความสามารถอันทรงพลังของ SVG คือมันสามารถควบคุมข้อความถึงระดับที่เป็นไปไม่ได้สำหรับหน้า HTML มาตรฐานโดยไม่ต้องขอความช่วยเหลือเกี่ยวกับรูปภาพหรือปลั๊กอินอื่น ๆ แม้ว่าการเรนเดอร์ข้อความของ SVG นั้นทรงพลัง แต่ก็ยังมีข้อเสียอย่างหนึ่ง: SVG ไม่สามารถทำการห่อเส้นอัตโนมัติได้ ถัดไปแนะนำการแสดงผลของข้อความใน SVG เพื่อนที่สนใจสามารถเรียนรู้เกี่ยวกับเรื่องนี้ซึ่งอาจเป็นประโยชน์
แสดงข้อความใน SVG
หนึ่งในความสามารถที่ทรงพลังของ SVG คือมันสามารถควบคุมข้อความถึงระดับที่เป็นไปไม่ได้สำหรับหน้า HTML มาตรฐานโดยไม่ต้องหันไปใช้รูปภาพหรือปลั๊กอินอื่น ๆ การกระทำใด ๆ ที่สามารถทำได้บนรูปร่างหรือเส้นทาง (เช่นการวาดหรือการกรอง) สามารถทำได้บนข้อความ แม้ว่าการเรนเดอร์ข้อความของ SVG นั้นทรงพลัง แต่ก็ยังมีข้อเสียอย่างหนึ่ง: SVG ไม่สามารถทำการห่อเส้นอัตโนมัติได้ หากข้อความยาวกว่าพื้นที่ที่อนุญาตให้ตัดออก ในกรณีส่วนใหญ่การสร้างข้อความหลายบรรทัดต้องใช้องค์ประกอบข้อความหลายรายการ
นอกจากนี้คุณสามารถใช้องค์ประกอบ TSPAN เพื่อแบ่งองค์ประกอบข้อความออกเป็นส่วน ๆ ทำให้แต่ละส่วนมีสไตล์ของตัวเอง
นอกจากนี้ในองค์ประกอบของข้อความการประมวลผลของช่องว่างนั้นคล้ายกับ HTML: ตัวแบ่งบรรทัดและการส่งคืนการขนส่งกลายเป็นช่องว่างในขณะที่ช่องว่างหลายช่องถูกบีบอัดลงในพื้นที่เดียว
ข้อความแสดงโดยตรงในรูปภาพ - องค์ประกอบข้อความ
ในการแสดงข้อความโดยตรงคุณสามารถใช้องค์ประกอบข้อความดังนี้:
<svg>
<rect fill = "สีแดง" />
<circle cx = "150" cy = "100" r = "80" fill = "green" />>>>>
<text x = "150" y = "125" font-size = "60" text-anchor = "middle" fill = "White"> svg </text>
</svg>
ดังที่แสดงในตัวอย่างด้านบนองค์ประกอบข้อความสามารถตั้งค่าคุณสมบัติต่อไปนี้:
x, y เป็นพิกัดตำแหน่งข้อความ Text-anchor เป็นทิศทางของการแสดงข้อความซึ่งจริง ๆ แล้วเป็นตำแหน่ง (x, y) ที่ตำแหน่งของข้อความ คุณสมบัตินี้มีสามค่า: เริ่มต้นกลางและสิ้นสุด เริ่มต้นหมายความว่าตำแหน่งข้อความพิกัด (x, y) อยู่ที่จุดเริ่มต้นของข้อความและข้อความเริ่มต้นจากจุดนี้ไปทางขวา Middle Means (X, Y) ตั้งอยู่ตรงกลางของข้อความและข้อความจะแสดงในทิศทางซ้ายและขวาซึ่งเป็นศูนย์กลางจริง ท้ายที่สุดหมายความว่าคะแนน (x, y) อยู่ที่ส่วนท้ายของข้อความและข้อความจะแสดงทีละหนึ่งไปทางซ้ายนอกเหนือจากคุณสมบัติเหล่านี้คุณสมบัติต่อไปนี้สามารถระบุได้ใน CSS หรือโดยตรงในคุณสมบัติ:
เติม, จังหวะ: การเติมและสีจังหวะการใช้งานเฉพาะจะสรุปในภายหลัง แอตทริบิวต์ที่เกี่ยวข้องของแบบอักษร: ครอบครัวฟอนต์, สไตล์แบบอักษร, ฟอนต์-น้ำหนัก, ตัวอักษรฟอนต์, การยืดตัวอักษร, ขนาดตัวอักษร, ปรับขนาดตัวอักษร, kerning, ระยะห่างของตัวอักษร, ระยะห่างและการกำหนดข้อความช่วงเวลาข้อความ - องค์ประกอบ TSPAN
องค์ประกอบนี้เป็นส่วนประกอบที่ทรงพลังสำหรับองค์ประกอบข้อความ มันถูกใช้เพื่อแสดงข้อความภายในช่วงเวลา; มันสามารถปรากฏในองค์ประกอบข้อความหรือองค์ประกอบลูกขององค์ประกอบ TSPAN การใช้งานทั่วไปคือการเน้นการแสดงบางส่วนของข้อความ ตัวอย่างเช่น:
<text>
<tspan font-weight = "bold" fill = "red"> นี่เป็นตัวหนาและสีแดง </tspan>
</text>
องค์ประกอบ TSPAN มีคุณสมบัติต่อไปนี้ที่สามารถตั้งค่าได้: X, Y, Y ใช้เพื่อตั้งค่าค่าพิกัดสัมบูรณ์ของข้อความที่มีอยู่ซึ่งจะแทนที่ตำแหน่งข้อความเริ่มต้น คุณสมบัติเหล่านี้สามารถมีชุดของตัวเลขที่ใช้กับแต่ละอักขระเดียวที่สอดคล้องกัน อักขระที่ไม่มีการตั้งค่าที่สอดคล้องกันจะเป็นไปตามอักขระก่อนหน้า ตัวอย่างเช่น:
<text x = "10" y = "10"> Hello World!
<tspan x = "100 200 300" font-weight = "bold" fill = "red"> นี่เป็นตัวหนาและสีแดง </tspan>
</text>
DX, DY ใช้เพื่อตั้งค่าออฟเซ็ตของข้อความที่มีอยู่สัมพันธ์กับตำแหน่งข้อความเริ่มต้น คุณสมบัติเหล่านี้ยังสามารถมีชุดของตัวเลขแต่ละตัวใช้กับอักขระที่เกี่ยวข้อง อักขระที่ไม่มีการตั้งค่าที่สอดคล้องกันจะเป็นไปตามอักขระก่อนหน้า คุณสามารถเปลี่ยน X จากตัวอย่างด้านบนเป็น DX เพื่อดูเอฟเฟกต์ การหมุนใช้เพื่อตั้งมุมการหมุนของตัวอักษร หน้าคุณสมบัตินี้สามารถมีชุดตัวเลขที่ใช้กับตัวละครแต่ละตัว อักขระที่ไม่มีการตั้งค่าที่สอดคล้องกันจะใช้ชุดหมายเลขสุดท้าย
<text x = "10" y = "10"> Hello World!
<tspan rotate = "10 20 45" font-weight = "bold" fill = "red"> นี่เป็นตัวหนาและสีแดง </tspan>
</text>
TextLength: นี่เป็นคุณสมบัติที่ทำให้งงที่สุด ว่ากันว่าหลังจากตั้งค่าเมื่อการแสดงผลพบว่าความยาวของข้อความไม่สอดคล้องกับค่านี้ความยาวนี้จะเป็นพื้นฐาน แต่ฉันไม่ได้ลองดู
ใบเสนอราคาข้อความ - องค์ประกอบของ TREF
องค์ประกอบนี้อนุญาตให้อ้างอิงถึงข้อความที่กำหนดไว้และคัดลอกไปยังตำแหน่งปัจจุบันอย่างมีประสิทธิภาพโดยปกติจะมีองค์ประกอบเป้าหมายที่ระบุ HREF: HREF เนื่องจากมีการคัดลอกเมื่อใช้ CSS เพื่อแก้ไขข้อความปัจจุบันข้อความต้นฉบับจะไม่ถูกแก้ไข ดูตัวอย่าง:
<text> นี่คือตัวอย่างข้อความ </text>
<text>
<tref xlink: href = "#ตัวอย่าง" />
</text>
เส้นทางข้อความ - องค์ประกอบข้อความ
สิ่งนี้น่าสนใจมากขึ้นเอฟเฟกต์ก็เจ๋งและสามารถสร้างผลกระทบทางศิลปะมากมาย องค์ประกอบนี้ใช้เส้นทางที่ระบุจากแอตทริบิวต์ Xlink: HREF และจัดเรียงข้อความบนเส้นทางนี้ดูตัวอย่าง:
<path d = "M 20,20 C 40,40 80,40 100,20" />>>>
<text>
<TextPath xlink: href = "#my_path"> ข้อความนี้เป็นไปตามเส้นโค้ง </textpath>
</text>
การแสดงภาพใน SVG - องค์ประกอบภาพ
องค์ประกอบภาพใน SVG สามารถรองรับการแสดงภาพแรสเตอร์โดยตรงซึ่งใช้งานง่ายมาก ดูตัวอย่างต่อไปนี้:
<svg>
<image xlink: href = "penguins.jpg" x = "0" y = "0"/>
</svg>
ควรทราบสองสามจุดที่นี่:
1. หากไม่มีการตั้งค่าพิกัด X หรือ Y ค่าเริ่มต้นคือ 0
2. หากไม่ได้ตั้งค่าความกว้างหรือความสูงค่าเริ่มต้นคือ 0
3. หากความกว้างหรือความสูงถูกตั้งค่าเป็น 0 อย่างชัดเจนการแสดงภาพของภาพนี้จะถูกห้าม
4. รูปแบบรูปภาพรองรับ PNG, JPEG, JPG, SVG ฯลฯ ดังนั้น SVG จึงรองรับ SVG ที่ซ้อนกัน
5.Image เป็นองค์ประกอบปกติของ SVG เช่นเดียวกับองค์ประกอบอื่น ๆ ดังนั้นจึงรองรับเอฟเฟกต์ทั้งหมดเช่นการปลูกพืชการปิดบังการกรองการหมุน ฯลฯ
การอ้างอิงเชิงปฏิบัติ:
ดัชนีสคริปต์: (v = vs.85) .aspx
ศูนย์พัฒนา: https://developer.mozilla.org/en/svg
ข้อมูลอ้างอิงที่เป็นที่นิยม:
เอกสารอย่างเป็นทางการ: