หนึ่งในความสามารถที่ทรงพลังของ 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 id = "ตัวอย่าง"> นี่คือตัวอย่างข้อความ </text>
<text>
<tref xlink: href = "#ตัวอย่าง" />
</text>
เส้นทางข้อความ - องค์ประกอบข้อความ สิ่งนี้น่าสนใจมากขึ้นเอฟเฟกต์ก็เจ๋งและสามารถสร้างผลกระทบทางศิลปะมากมาย องค์ประกอบนี้ใช้เส้นทางที่ระบุจากแอตทริบิวต์ Xlink: HREF และจัดเรียงข้อความบนเส้นทางนี้ดูตัวอย่าง:<path id = "my_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 เช่นเดียวกับองค์ประกอบอื่น ๆ ดังนั้นจึงรองรับเอฟเฟกต์ทั้งหมดเช่นการปลูกพืชการปิดบังการกรองการหมุน ฯลฯ
การอ้างอิงเชิงปฏิบัติ:ดัชนีสคริปต์: http://msdn.microsoft.com/zh-cn/library/ff97110(v=vs.85).aspx
ศูนย์พัฒนา: https://developer.mozilla.org/en/svg
ข้อมูลอ้างอิงยอดนิยม: http://www.chinasvg.com/
เอกสารอย่างเป็นทางการ: http://www.w3.org/tr/svg11/