SVG 2D ของ HTML5 บทนำ 5 - การแสดงสีและวิธีการกำหนด

SVG และ Canvas เหมือนกันทั้งสองใช้วิธีการแสดงสี HTML/CSS มาตรฐานและสีเหล่านี้สามารถใช้สำหรับแอตทริบิวต์การเติมและจังหวะ

โดยทั่วไปมีวิธีการกำหนดสีต่อไปนี้ :

1. ชื่อสี: ใช้ชื่อสีแดง, สีน้ำเงิน, ดำ ...

2. ค่า RGBA/RGB: นี่เป็นเรื่องง่ายที่จะเข้าใจเช่น #FF0000, RGBA (255,100,100,0.5)

3. ค่าเลขฐานสิบหก: สีที่กำหนดไว้ในเลขฐานสิบหกเช่น #FFFFFF

4. ค่าการไล่ระดับสี: นี่ก็เหมือนกับในผืนผ้าใบรองรับการไล่ระดับสีสองสี: การไล่ระดับสีเชิงเส้นและการไล่ระดับสีของวงแหวน ดังที่แสดงในรูปด้านล่าง:

5. การเติมรูปแบบ: ใช้รูปแบบที่กำหนดเองเป็นสีเติม

สองสามคนแรกนั้นง่ายมากให้โฟกัสไปที่สองสีเติมในอีกสองสี

การไล่ระดับสีเชิงเส้น

การไล่ระดับสีเชิงเส้นสามารถใช้เพื่อกำหนดระดับการไล่ระดับสีเชิงเส้นและส่วนประกอบสีไล่ระดับสีแต่ละตัวถูกกำหนดโดยใช้องค์ประกอบหยุด ดูตัวอย่างต่อไปนี้:

<svg>

<defs>

<linearGradient id = "gradient1">

<stop Offset = "0%"/>

<stop Offset = "50%"/>

<stop Offset = "100%"/>

</lineargradient>

<LinearGradient ID = "GRADIEND2" x1 = "0" x2 = "0" y1 = "0" y2 = "1">

<stop Offset = "0%" stop-color = "red"/>>

<stop Offset = "50%" stop-color = "black" stop-opacity = "0"/>>>

<stop Offset = "100%" stop-color = "blue"/>>

</lineargradient>

<style type = "text/css"> <! [cdata [

#rect1 {เติม: url (#gradient1); -

.stop1 {หยุดสี: สีแดง; -

.stop2 {หยุดสี: ดำ; หยุดความโอหอง: 0; -

.stop3 {หยุดสี: สีน้ำเงิน; -

-

</style>

</defs>

<rect id = "rect1" x = "10" y = "10" rx = "15" ry = "15"/>

<rect x = "10" y = "120" rx = "15" ry = "15" fill = "url (#gradient2)"/>

</svg>

ในตัวอย่างนี้เราต้องทราบ :

1. องค์ประกอบสีไล่ระดับสีจะต้องอยู่ในองค์ประกอบ defs;

2. คุณต้องตั้งค่า ID สำหรับองค์ประกอบการไล่ระดับสีมิฉะนั้นองค์ประกอบอื่น ๆ จะไม่สามารถใช้การไล่ระดับสีนี้ได้

3. สมาชิกสีไล่ระดับสีถูกกำหนดโดยใช้การหยุดและคุณสมบัติของพวกเขายังสามารถกำหนดได้โดยใช้ CSS; รองรับแอตทริบิวต์เช่นคลาสและ ID ซึ่งได้รับการสนับสนุนโดยมาตรฐาน HTML คุณลักษณะทั่วไปอื่น ๆ มีดังนี้ :

แอตทริบิวต์ ออฟเซ็ ต: สิ่งนี้กำหนดช่วงของการกระทำของสีสมาชิกและค่าของแอตทริบิวต์นี้คือจาก 0% ถึง 100% (หรือ 0 ถึง 1); โดยปกติสีแรกจะถูกตั้งค่าเป็น 0%และสีสุดท้ายถูกตั้งค่าเป็น 100%

แอตทริบิวต์ หยุดสี : นี่เป็นเรื่องง่ายมากกำหนดสีของสีสมาชิก

คุณสมบัติ การหยุดยั้ง : กำหนดความโปร่งใสของสีสมาชิก

คุณลักษณะ X1, Y1, X2, Y2 : จุดทั้งสองนี้กำหนดทิศทางของการไล่ระดับสี หากคุณไม่ได้เขียนตามค่าเริ่มต้นมันเป็นการไล่ระดับสีแนวนอน ในตัวอย่างข้างต้นมีการสร้างการไล่ระดับสีแนวตั้งด้วย

4. ใช้สีไล่ระดับสีดังที่แสดงในตัวอย่างเพียงกำหนดค่าให้เติมหรือจังหวะในรูปแบบของ URL (#ID)

5. การใช้ซ้ำของสมาชิกไล่ระดับสี: คุณยังสามารถใช้ Xlink: HREF เพื่ออ้างถึงสมาชิกไล่ระดับสีที่กำหนดไว้ดังนั้นตัวอย่างข้างต้นสามารถเขียนใหม่ได้ดังนี้:

<linearGradient id = "gradient1">

<stop Offset = "0%"/>

<stop Offset = "50%"/>

<stop Offset = "100%"/>

</lineargradient>

<linearGradient id = "gradient2" x1 = "0" x2 = "0" y1 = "0" y2 = "1" xlink: href = "#gradient1"/> >>

การไล่ระดับสี

ใช้องค์ประกอบ radialgradient เพื่อกำหนดวงแหวนการไล่ระดับสีหรือใช้ Stop เพื่อกำหนดสีสมาชิก ดูตัวอย่าง:

<svg>

<defs>

<radialgradient id = "gradient3">

<stop Offset = "0%" stop-color = "red"/>>

<stop Offset = "100%" stop-color = "blue"/>>

</radialgradient>

<radialgradient id = "gradient4" cx = "0.25" cy = "0.25" r = "0.25">

<stop Offset = "0%" stop-color = "red"/>>

<stop Offset = "100%" stop-color = "blue"/>>

</radialgradient>

</defs>

<rect x = "10" y = "10" rx = "15" ry = "15" fill = "url (#gradient3)"/>

<rect x = "10" y = "120" rx = "15" ry = "15" fill = "url (#gradient4)"/>

</svg>

จากตัวอย่างข้างต้นยกเว้นชื่อองค์ประกอบและสมาชิกพิเศษบางอย่างทุกอย่างอื่นเหมือนกับการไล่ระดับสีเชิงเส้นรวมถึงคำจำกัดความของการหยุดจะต้องอยู่ใน defs จะต้องตั้งค่าเป็น id ใช้ url (#id) เพื่อกำหนดค่า ฯลฯ สมาชิกพิเศษเหล่านี้มีดังนี้:

แอตทริบิวต์ ออฟเซ็ต: นี่เหมือนกับค่าการไล่ระดับสีเชิงเส้น แต่ความหมายแตกต่างกัน ในการไล่ระดับวงแหวน 0% หมายถึงศูนย์กลางของวงกลมซึ่งเข้าใจง่าย

CX, CY, R คุณลักษณะ: อันที่จริงมันเข้าใจง่าย แหวนเป็นค่อยๆ แน่นอนคุณต้องกำหนดศูนย์และรัศมีของวงแหวน คุณสามารถเข้าใจขนาดและตำแหน่งของวงกลมในตัวอย่างข้างต้น

FX, FY Attribute: กำหนดตำแหน่งที่กึ่งกลางของสี (โฟกัส) นั่นคือพิกัดที่สถานที่หนาแน่นที่สุดของสีไล่ระดับสี ในตัวอย่างข้างต้น Reddish เป็นศูนย์กลางของวงกลมซึ่งเป็นเอฟเฟกต์เริ่มต้น หากคุณต้องการเปลี่ยนคุณสามารถตั้งค่าค่าพิกัด FX, FY

อย่างไรก็ตามคุณต้องให้ความสนใจกับค่าของ CX, Cy, R, FX, FY ข้างต้น คุณจะพบว่าพวกเขาเป็นทศนิยมทั้งหมดดังนั้นหน่วยคืออะไร?

สิ่งนี้ต้องการให้คุณเข้าใจแอตทริบิวต์อื่นที่เกี่ยวข้องก่อนอื่น: การไล่ระดับสี ซึ่งกำหนดหน่วยพิกัดที่ใช้ในการกำหนดสีการไล่ระดับสี คุณสมบัตินี้มี 2 ค่าที่มีอยู่: Userspaceonuse และ ObjectBoundingBox

ObjectBoundingBox เป็นค่าเริ่มต้น พิกัดที่ใช้นั้นสัมพันธ์กับกล่องที่ล้อมรอบวัตถุ (กรณีที่ไม่ใช่กล่องสี่เหลี่ยมจัตุรัสที่ซับซ้อนกว่าข้ามมัน) และช่วงค่าคือ 0 ถึง 1 ตัวอย่างเช่นค่าพิกัดของ CX และ CY ในตัวอย่างข้างต้น (0.25, 0.25) หมายความว่าจุดศูนย์กลางของวงกลมคือ 1/4 ของมุมซ้ายบนของกล่องกล่องหุ้มและรัศมี 0.25 หมายความว่ารัศมีคือ 1/4 ของความยาวของกล่องกล่องสี่เหลี่ยมจัตุรัสวัตถุตามที่คุณเห็นในรูป

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

ดูตัวอย่างต่อไปนี้โปรดทราบว่าค่าเริ่มต้นของคุณสมบัติการไล่ระดับสีคือ ObjectBoundingBox:

<svg>

<defs>

<radialgradient id = "gradient5"

cx = "0.5" cy = "0.5" r = "0.5" fx = "0.25" fy = "0.25">

<stop Offset = "0%" stop-color = "red"/>>

<stop Offset = "100%" stop-color = "blue"/>>

</radialgradient>

</defs>

<rect x = "10" y = "10" rx = "15" ry = "15"

fill = "url (#gradient5)" stroke = "black" stroke-width = "2"/>

<circle cx = "60" cy = "60" r = "50" fill = "transparent" stroke = "White" stroke-width = "2"/>

<circle cx = "35" cy = "35" r = "2" fill = "White" stroke = "White"/>>

<circle cx = "60" cy = "60" r = "2" fill = "White" stroke = "White"/>>

<text x = "38" y = "40" fill = "White" font-family = "sans-serif" font-size = "10pt"> (fx, fy) </text>

<text x = "63" y = "63" fill = "White" font-family = "sans-serif" font-size = "10pt"> (cx, cy) </text>

</svg>

คุณจะรู้ถึงความหมายของการโฟกัสโดยดูที่การเรนเดอร์

นอกจากนี้ยังมีองค์ประกอบสีไล่ระดับสีและคุณสมบัติการแปลงบางอย่างเช่น การไล่ระดับสี ซึ่งไม่ใช่โฟกัสที่นี่และการเปลี่ยนแปลงจะถูกสรุปในภายหลัง

คุณลักษณะที่เป็นไปได้อีกอย่างหนึ่งที่ใช้คือคุณสมบัติ Spreadmethod ซึ่งกำหนดพฤติกรรมที่สีไล่ระดับสีควรใช้เมื่อถึงจุดสิ้นสุด คุณสมบัตินี้มี 3 ค่าเสริม: PAD (ค่าเริ่มต้น), ไตร่ตรอง, ทำซ้ำ ไม่จำเป็นต้องพูด PAD เป็นการเปลี่ยนแปลงตามธรรมชาติ หลังจากสีไล่ระดับสีสิ้นสุดลงให้ใช้สีสมาชิกสุดท้ายเพื่อแสดงผลส่วนที่เหลือของวัตถุโดยตรง Refect จะทำให้สีไล่ระดับสีดำเนินต่อไป แต่สีไล่ระดับสีจะยังคงแสดงผลต่อไปโดยเริ่มจากสีสุดท้ายเป็นสีแรก เมื่อถึงจุดสิ้นสุดสีไล่ระดับสีอีกครั้งให้ย้อนกลับลำดับเพื่อให้วัตถุถูกกรอกด้วยวิธีนี้ การทำซ้ำจะช่วยให้สีการไล่ระดับสีดำเนินต่อไปเรนเดอร์ แต่จะไม่กลับรายการและจะยังคงแสดงผลจากสีแรกเป็นสีสุดท้ายซ้ำแล้วซ้ำอีก การเรนเดอร์มีดังนี้:

ดูส่วนหนึ่งของรหัสที่แสดงซ้ำ ๆ :

<svg>

<defs>

<radialgradient id = "gradient"

cx = "0.5" cy = "0.5" r = "0.25" fx = ". 25" fy = ". 25"

SpreadMethod = "ทำซ้ำ">

<stop Offset = "0%" stop-color = "red"/>>

<stop Offset = "100%" stop-color = "blue"/>>

</radialgradient>

</defs>

<rect x = "50" y = "50" rx = "15" ry = "15"

fill = "url (#gradient)"/>

</svg>

การเติมพื้นผิว

การเติมพื้นผิวยังเป็นวิธีการเติมยอดนิยม ใน SVG คุณสามารถใช้รูปแบบเพื่อสร้างพื้นผิวจากนั้นใช้รูปแบบนี้เพื่อเติมวัตถุอื่น ๆ ลองดูตัวอย่างโดยตรง:

<svg>

<defs>

<linearGradient id = "gradient6">

<stop Offset = "0%" stop-color = "White"/>>

<stop Offset = "100%" stop-color = "blue"/>>

</lineargradient>

<LinearGradient ID = "GRADIENT7" x1 = "0" x2 = "0" y1 = "0" y2 = "1">

<stop Offset = "0%" stop-color = "red"/>>

<stop Offset = "100%" stop-color = "Orange"/>>

</lineargradient>

</defs>

<defs>

<pattern id = "pattern" x = ". 05" y = ". 05">

<rect x = "0" y = "0" fill = "skyblue"/>>

<rect x = "0" y = "0" fill = "url (#gradient7)"/>

<circle cx = "25" cy = "25" r = "20" fill = "url (#gradient6)" fill-opacity = "0.5"/>

</pattern>

</defs>

<rect fill = "url (#pattern)" stroke = "black" x = "0" y = "0"/>

</svg>

ตัวอย่างดูเรียบง่ายสร้างรูปแบบจากสีไล่ระดับสีจากนั้นใช้รูปแบบ

เติมสี่เหลี่ยม หมายเหตุที่นี่:

1. เอฟเฟกต์แตกต่างกันเมื่อเติมรูปแบบนี้ในเบราว์เซอร์ที่แตกต่างกัน

ตัวอย่างเช่นตัวอย่างทำงานเหมือนกันใน Firefix และ Chrome แต่ถ้าคุณทำสีไล่ระดับสี

หากรูปแบบถูกกำหนดไว้ในชุดค่าผสม DEF เดียวกัน Firefox ยังคงสามารถแสดงผลได้ตามปกติ

อย่างไรก็ตาม Chrome ไม่สามารถรับรู้สีไล่ระดับสีได้ แต่จะเติมด้วยสีดำเริ่มต้นเท่านั้น

2. รูปแบบยังต้องกำหนด ID

3. รูปแบบจะต้องกำหนดไว้ใน defs

4. การใช้รูปแบบคือการกำหนด URL โดยตรง (#ID) เพื่อเติมหรือจังหวะ

ข้างต้นเป็นเรื่องง่ายมาก มามุ่งเน้นไปที่การเป็นตัวแทนพิกัดในตัวอย่าง พิกัดมีความซับซ้อนมากขึ้นในรูปแบบ

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

1. แอตทริบิวต์รูป แบบ

คุณสมบัตินี้เหมือนกับคุณสมบัติการไล่ระดับสีของการไล่ระดับสีและ ObjectBoundingBox ถูกใช้โดยค่าเริ่มต้น คุณลักษณะที่ได้รับผลกระทบจากแอตทริบิวต์นี้คือ x, y, ความกว้างและความสูง คุณลักษณะทั้งสี่นี้กำหนดจุดเริ่มต้นและความกว้างของรูปแบบตามลำดับ พวกเขาทั้งสองใช้ค่าสัมพัทธ์และในตัวอย่างพวกเขาต้องการเติมในทิศทางแนวนอนและแนวตั้ง 4 ครั้งดังนั้นทั้งความกว้างและความสูงจึงถูกตั้งค่าเป็น 0.25

2. PatternContentUnits Property

ค่าเริ่มต้นของคุณสมบัตินี้เป็นสิ่งที่ตรงกันข้ามโดยใช้ Userspaceonuse คุณสมบัตินี้อธิบายระบบพิกัดของรูปร่างที่วาดในรูปแบบ (เช่น rect, วงกลมด้านบน) กล่าวคือโดยค่าเริ่มต้นรูปร่างที่คุณวาดในรูปแบบจะใช้ระบบพิกัดที่แตกต่างกันและขนาด/ตำแหน่งของรูปแบบเอง เมื่อพิจารณาถึงกรณีในตัวอย่างข้างต้นเราต้องการเติมสี่เหลี่ยมจัตุรัส 200*200 และทำซ้ำแต่ละทิศทาง 4 ครั้ง ซึ่งหมายความว่าแต่ละรูปแบบคือ 50*50 ดังนั้นสี่เหลี่ยมทั้งสองและวงกลมภายในรูปแบบจะถูกวาดในรูปสี่เหลี่ยมผืนผ้า 50*50 ด้วยวิธีนี้เราสามารถเข้าใจพิกัดของสี่เหลี่ยมและวงกลมในรูปแบบด้านบน นอกจากนี้เพื่อที่จะจัดกึ่งกลางรูปแบบในตัวอย่างนี้มันจะต้องชดเชยด้วย 10px ก่อนการแสดงผล ค่านี้ถูก จำกัด โดยคุณสมบัติ PlateMunits ดังนั้นโดยค่าเริ่มต้นค่า x และ y คือ: 10/200 = 0.05

เหตุใดรูปแบบจึงตั้งค่าเริ่มต้นของแอตทริบิวต์ทั้งสองเช่นนี้?

สิ่งนี้ถูกกำหนดโดยการใช้งานของผู้ใช้ (กล่าวถึงในตัวอย่างข้างต้น):

รูปแบบรูปแบบแรก : ฉันคิดว่านี่เป็นสถานการณ์ส่วนใหญ่ดังนั้นจึงถูกประมวลผลเป็นค่าเริ่มต้น: รูปแบบถูกยืดออกเป็นกราฟด้านนอกถูกปรับขนาดและไม่ว่าสี่เหลี่ยมด้านนอกจะใหญ่แค่ไหนรูปแบบจะเต็ม 4 ครั้งในทั้งสองทิศทาง อย่างไรก็ตามกราฟิกที่มีอยู่ในรูปแบบจะไม่ถูกยืดออกเนื่องจากสี่เหลี่ยมที่เต็มไปด้วยด้านนอกจะถูกปรับขนาด แม้ว่ามันจะไกลออกไป แต่ก็เข้าใจมัน

รูปแบบรูปแบบที่สอง : รูปร่างในรูปแบบนั้นยืดออกเป็นรูปร่างของขอบด้านนอกถูกปรับขนาด นอกจากนี้เรายังสามารถกำหนดค่าของคุณสมบัติ PatternContentUnits เป็น ObjectBoundingBox เพื่อให้ได้เอฟเฟกต์นี้ ตัวอย่างเช่นแก้ไขส่วนรูปแบบดังนี้:

<pattern id = "pattern" patternContentUnits = "ObjectBoundingBox">

<rect x = "0" y = "0" fill = "skyblue"/>>

<rect x = "0" y = "0" fill = "url (#gradient2)"/>>>

<circle cx = ". 125" cy = ". 125" r = ". 1" fill = "url (#gradient1)" fill-opacity = "0.5"/>>

</pattern>

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

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

<pattern id = "pattern" x = "10" y = "10" patternunits = "UsersPaceOnuse">

<rect x = "0" y = "0" fill = "skyblue"/>>

<rect x = "0" y = "0" fill = "url (#gradient2)"/>>>

<circle cx = "25" cy = "25" r = "20" fill = "url (#gradient1)" fill-opacity = "0.5"/>

</pattern>

รูปแบบทั่วไปใน 3 นี้จะแสดงในรูปด้านล่าง:

การอ้างอิงเชิงปฏิบัติ:

เอกสารอย่างเป็นทางการ: http://www.w3.org/tr/svg11/

ดัชนีสคริปต์: http://msdn.microsoft.com/zh-cn/library/ff97110(v=vs.85).aspx

ศูนย์พัฒนา: https://developer.mozilla.org/en/svg

ข้อมูลอ้างอิงยอดนิยม: http://www.chinasvg.com/