ก่อนหน้านี้เรามุ่งเน้นไปที่การสรุปรูปร่างข้อความและรูปภาพต่าง ๆ ต่อไปเราจะสรุปการประมวลผลสีนั่นคือเอฟเฟกต์การเติมและผลกระทบของชายแดนในขณะที่เราพูดถึงผืนผ้าใบ คุณจะพบว่าเนื้อหาที่นี่โดยทั่วไปเหมือนกับผืนผ้าใบ คุณสมบัติเหล่านี้สามารถเขียนในองค์ประกอบเป็นคุณลักษณะหรือเก็บไว้ใน CSS (ซึ่งแตกต่างจากผืนผ้าใบ)
เติมสี - เติมแอตทริบิวต์ คุณสมบัตินี้ใช้สีชุดเพื่อเติมเต็มด้านในของรูป ใช้งานง่ายมาก เพียงกำหนดค่าสีให้กับคุณสมบัตินี้โดยตรง ดูตัวอย่าง:<rect x = "10" y = "10" stroke = "blue" fill = "red"
Fill-Opacity = "0.5" stroke-opacity = "0.8"/>
ในตัวอย่างด้านบนรูปสี่เหลี่ยมผืนผ้าสีแดงและสีน้ำเงินจะถูกวาด บางจุดควรทราบ:
1. หากไม่มีการให้ แอตทริบิวต์ การเติมสีดำจะถูกใช้โดยค่าเริ่มต้น หากคุณต้องการยกเลิกการเติมคุณต้องตั้งค่าเป็นไม่มี
2. คุณสามารถตั้งค่าความโปร่งใสของการเติมนั่นคือ ความเป็นเติมเต็ม และช่วงค่าคือ 0 ถึง 1
3. อันที่ซับซ้อนกว่าเล็กน้อยคือแอตทริบิวต์ การเติมกฎ คุณสมบัตินี้กำหนดอัลกอริทึมที่กำหนดว่าจุดนั้นเป็นของช่วงการเติมหรือไม่ นอกเหนือจากการสืบทอดแล้วยังมีสองค่า:
Nonzero : อัลกอริทึมที่ใช้สำหรับค่านี้คือการปล่อยเส้นจากจุดที่ต้องตัดสินไปยังทิศทางใด ๆ จากนั้นคำนวณทิศทางของจุดตัดระหว่างรูปและส่วนของเส้น; ผลการคำนวณเริ่มต้นจาก 0 และทุกส่วนของเส้นที่สี่แยกนั้นมาจากซ้ายไปขวาเพิ่ม 1; ทุกส่วนของเส้นที่สี่แยกนั้นมาจากขวาไปซ้ายลบ 1; หลังจากคำนวณจุดตัดทั้งหมดด้วยวิธีนี้หากผลลัพธ์ของการคำนวณนี้ไม่เท่ากับ 0 จุดอยู่ในรูปและต้องกรอก หากค่าเท่ากับ 0 ไม่จำเป็นต้องเติมนอกรูป ดูตัวอย่างต่อไปนี้: EVENDD : อัลกอริทึมที่ใช้สำหรับค่านี้คือการปล่อยบรรทัดจากจุดที่ต้องตัดสินไปในทิศทางใด ๆ จากนั้นคำนวณจำนวนจุดที่รูปและส่วนของเส้นตัดตัด หากตัวเลขแปลก ๆ จุดจะถูกเปลี่ยนเป็นรูปและต้องกรอกข้อมูล หากตัวเลขอยู่ตรงจุดอยู่นอกรูปและไม่จำเป็นต้องกรอก ดูตัวอย่างในรูปด้านล่าง: สีขอบ - แอตทริบิวต์โรคหลอดเลือดสมอง ตัวอย่างข้างต้นใช้แอตทริบิวต์ Stroke แอตทริบิวต์นี้ใช้ค่าที่ตั้งไว้เพื่อวาดเส้นขอบของรูปซึ่งใช้โดยตรงมาก เพียงกำหนดค่าสีให้กับมัน สังเกต:1. หากไม่มีการให้แอตทริบิวต์ Stroke เส้นขอบกราฟจะไม่ถูกวาดโดยค่าเริ่มต้น
2. คุณสามารถตั้งค่าความโปร่งใสของขอบซึ่งเป็น จังหวะที่ยอดเยี่ยม และช่วงค่าคือ 0 ถึง 1
ในความเป็นจริงสถานการณ์ของขอบมีความซับซ้อนมากกว่าด้านในของกราฟเล็กน้อยเนื่องจากนอกเหนือจากสีขอบยังมีรูปร่างที่ต้องกำหนด
จุดสิ้นสุดของบรรทัด - คุณสมบัติ Stroke -Linecap
คุณสมบัตินี้กำหนดรูปแบบของจุดสิ้นสุดของส่วนบรรทัด คุณสมบัตินี้สามารถใช้สามค่า ก้นสี่เหลี่ยมจัตุรัสและกลม ดูตัวอย่าง:<svg>
<line x1 = "40" x2 = "120" y1 = "20" y2 = "20" stroke = "black" stroke-width = "20" stroke-linecap = "butt"/>>>>>> >>
<line x1 = "40" x2 = "120" y1 = "60" y2 = "60" stroke = "black" stroke-width = "20" stroke-linecap = "square"/>>>>>>> >>
<line x1 = "40" x2 = "120" y1 = "100" y2 = "100" stroke = "black" stroke-width = "20" stroke-linecap = "Round"/> >>
</svg>
รหัสนี้วาด 3 บรรทัดโดยใช้รูปแบบที่แตกต่างกันของจุดสิ้นสุดบรรทัด
จากภาพทางด้านซ้ายเราสามารถเห็นความแตกต่างของสไตล์ใน 3 ได้อย่างง่ายดาย
การเชื่อมต่อสาย - แอตทริบิวต์ Stroke -LineJoin คุณสมบัตินี้กำหนดรูปแบบที่การเชื่อมต่อของกลุ่มบรรทัด คุณสมบัตินี้สามารถใช้ค่าสามค่าของ MITER, ROUND และ BEVEL ดูตัวอย่าง:<svg>
<polyline points = "40 60 80 20 120 60" stroke = "black" stroke-width = "20"
stroke-linecap = "butt" fill = "โปร่งใส" stroke-linejoin = "miter"/>
<polyline points = "40 140 80 100 120 140" stroke = "ดำ" จังหวะจังหวะ = "20"
stroke-linecap = "round" fill = "transparent" stroke-linejoin = "round"/>>>>>>>
<polyline points = "40 220 80 180 120 220" Stroke = "Black" Stroke-Width = "20"
stroke-linecap = "square" fill = "transparent" stroke-linejoin = "bevel"/>
</svg>
จากภาพทางด้านซ้ายเราสามารถเห็นความแตกต่างในสไตล์ใน 3 ได้อย่างง่ายดาย
แอตทริบิวต์เสมือนจริงและจริง - แอตทริบิวต์ Stroke -Dasharray
คุณสมบัตินี้สามารถตั้งค่าสายเสมือนและจริงของส่วนบรรทัด ดูตัวอย่าง:<svg>
<path d = "M 10 75 Q 50 10 100 75 T 190 75" Stroke = "Black"
stroke-linecap = "Round" stroke-Dasharray = "5,10,5" fill = "none"/>
<path d = "M 10 75 L 190 75" Stroke = "Red"
stroke-linecap = "round" stroke-width = "1" stroke-dasharray = "5,5" fill = "none"/>
</svg>
คุณสมบัตินี้ตั้งค่าคอลัมน์ของตัวเลขบางตัว แต่ตัวเลขเหล่านี้จะต้องคั่นด้วยเครื่องหมายจุลภาค
แน่นอนว่าช่องว่างสามารถรวมอยู่ในแอตทริบิวต์ แต่ไม่ได้ใช้ช่องว่างเป็นตัวคั่น แต่ละหมายเลข
ความยาวของเซ็กเมนต์ของเส้นทึบถูกกำหนดและมันจะถูกปั่นจักรยานตามลำดับการวาดและไม่วาด
ดังนั้นเส้นที่วาดในตัวอย่างทางด้านซ้ายจึงเป็นเส้นทึบที่มี 5 หน่วยออกจากช่องว่างด้วย 5 หน่วย
วาดเส้นทึบ 5 หน่วย ... และดำเนินการต่อเช่นนี้
นอกเหนือจากคุณสมบัติที่ใช้กันทั่วไปเหล่านี้คุณสมบัติต่อไปนี้สามารถตั้งค่าได้:
Stroke-Miterlimit : นี่เป็นเช่นเดียวกับในผืนผ้าใบซึ่งจัดการกับเอฟเฟกต์ MITER ที่การเชื่อมต่อระหว่างเวลาและถ้ามีการวาดเส้น Stroke-Dashoffset : คุณสมบัตินี้ตั้งค่าตำแหน่งที่เส้นประเริ่มต้นที่จะวาด ใช้ CSS เพื่อแสดงข้อมูล HTML5 เสริมความคิดของ DIV+CSS ดังนั้นส่วนที่แสดงข้อมูลยังสามารถส่งไปยัง CSS สำหรับการประมวลผล เมื่อเทียบกับองค์ประกอบ HTML ธรรมดามันเป็นเพียงพื้นหลังสีและเส้นขอบแทนที่ด้วยการเติมและจังหวะ คนอื่น ๆ ส่วนใหญ่มีความคล้ายคลึงกัน ลองมาตัวอย่างสั้น ๆ :#Myrect: โฮเวอร์ {
โรคหลอดเลือดสมอง: ดำ;
เติม: สีน้ำเงิน;
-
มันไม่คุ้นเคยมากเหรอ? มันง่ายมาก
การอ้างอิงเชิงปฏิบัติ:ดัชนีสคริปต์: 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/