SVG รองรับเอฟเฟกต์หน้ากากที่หลากหลาย การใช้คุณสมบัติเหล่านี้เราสามารถสร้างเอฟเฟกต์ที่น่าตื่นตามากมาย สำหรับหน้ากากเรียกว่าหน้ากากหรือหน้ากากเป็นภาษาจีนมันไม่ได้แตกต่างกัน มันเรียกว่าหน้ากากที่นี่
ประเภทของหน้ากากที่สนับสนุนโดย SVG:
1. เส้นทางตัด
เส้นทางการตัดเป็นกราฟที่ประกอบด้วยพา ธ ข้อความหรือกราฟพื้นฐาน กราฟิกทั้งหมดภายในเส้นทางคลิปสามารถมองเห็นได้และกราฟิกทั้งหมดที่อยู่นอกเส้นทางคลิปจะมองไม่เห็น
2. หน้ากาก/หน้ากาก
หน้ากากเป็นภาชนะที่กำหนดชุดของกราฟิกและใช้เป็นสื่อโปร่งแสงที่สามารถใช้ในการรวมวัตถุเบื้องหน้าและพื้นหลัง
ความแตกต่างที่สำคัญระหว่างเส้นทางการตัดและหน้ากากอื่น ๆ คือเส้นทางการตัดเป็นหน้ากาก 1 บิตซึ่งหมายความว่าวัตถุที่ครอบคลุมโดยเส้นทางการตัดนั้นมีความโปร่งใสอย่างเต็มที่ (มองเห็นได้อยู่ภายในเส้นทางการตัด) หรือทึบแสงอย่างสมบูรณ์ (ไม่สามารถมองเห็นได้ และหน้ากากสามารถระบุความโปร่งใสในสถานที่ต่าง ๆ
เส้นทางการตัดของหน้าต่าง - คุณสมบัติล้นและคลิปแอตทริบิวต์ล้นและแอตทริบิวต์คลิปขององค์ประกอบ HTML ร่วมกันตั้งค่าพฤติกรรมการตัดขององค์ประกอบเป็นเนื้อหา ในทำนองเดียวกันใน SVG คุณสมบัติทั้งสองเหล่านี้สามารถใช้ได้
ล้น = มองเห็นได้ | ซ่อน ม้วน อัตโนมัติ สืบทอด แอตทริบิวต์ล้นจะกำหนดพฤติกรรมที่ถ่ายเมื่อเนื้อหาขององค์ประกอบเกินขอบเขตขององค์ประกอบคุณสมบัตินี้สามารถใช้สำหรับองค์ประกอบ (SVG, สัญลักษณ์, ภาพ, ต่างประเทศ), องค์ประกอบรูปแบบและเครื่องหมายที่สามารถสร้างหน้าต่างใหม่ มูลค่าของคุณสมบัตินี้มีดังนี้:
มองเห็นได้: แสดงเนื้อหาทั้งหมดแม้ว่าเนื้อหาจะอยู่นอกขอบเขตขององค์ประกอบแล้วนี่คือค่าเริ่มต้น
ซ่อน: ซ่อนเนื้อหานอกเหนือจากเส้นทางการตัด เส้นทางคลิปถูกระบุโดยคุณสมบัติคลิป
SCROLL: ในรูปแบบของแถบเลื่อนนำเสนอเนื้อหานอกเหนือจากนั้น
อัตโนมัติ: การใช้พฤติกรรมที่กำหนดเบราว์เซอร์ดูเหมือนจะไม่น่าเชื่อถือ
คุณสมบัตินี้โดยทั่วไปเหมือนกับคุณสมบัติของชื่อเดียวกันใน CSS2 ยกเว้นใน SVG มีขั้นตอนการประมวลผลที่แตกต่างกัน:
1. แอตทริบิวต์ล้นไม่มีผลต่อองค์ประกอบอื่นนอกเหนือจากองค์ประกอบที่สร้างหน้าต่างใหม่ (SVG, สัญลักษณ์, ภาพ, ต่างประเทศ), รูปแบบและองค์ประกอบของเครื่องหมาย
2. เส้นทางการตัดสอดคล้องกับหน้าต่าง หากมีการสร้างหน้าต่างใหม่เส้นทางการตัดใหม่จะถูกสร้างขึ้น เส้นทางการตัดเริ่มต้นคือขอบเขตของหน้าต่าง
คลิป = <mhape> | อัตโนมัติ สืบทอด คุณสมบัติคลิปใช้เพื่อตั้งค่าเส้นทางคลิปของหน้าต่างปัจจุบันคุณสมบัตินี้สามารถใช้สำหรับองค์ประกอบ (SVG, สัญลักษณ์, ภาพ, ต่างประเทศ), องค์ประกอบรูปแบบและเครื่องหมายที่สามารถสร้างหน้าต่างใหม่ คุณสมบัตินี้มีพารามิเตอร์เดียวกับคุณสมบัติที่มีชื่อเดียวกันใน CSS2 อัตโนมัติหมายความว่าเส้นทางการตัดสอดคล้องกับขอบหน้าต่าง เมื่อใช้กราฟเป็นพารามิเตอร์ (การตั้งค่าของค่าด้านบนขวาด้านล่างและซ้ายของสี่เหลี่ยมตัด) สามารถใช้ค่าพิกัดของผู้ใช้ (เช่นพิกัดที่ไม่มีหน่วย) สามารถใช้งานได้ ตัวอย่างเช่น:
p {คลิป: rect (5px, 10px, 10px, 5px); -
โปรดทราบว่าโดยค่าเริ่มต้น (ล้นและคลิปเป็นทั้งค่าเริ่มต้น) เส้นทางคลิปสอดคล้องกับเส้นขอบของหน้าต่าง หลังจากตั้งค่า viewbox และ squalseaspectratio คุณมักจะต้องแมปทั้งสี่ด้านของเส้นทางคลิปคลิปลงในสี่ด้านของ viewbox เพื่อให้แน่ใจว่าเอฟเฟกต์การแสดงผลบางอย่างเหมือนกัน (แน่นอนถ้าพวกเขาเป็นค่าเริ่มต้นทั้งหมดคุณไม่จำเป็นต้องตั้งค่า)
เส้นทางการตัดไปยังวัตถุ - องค์ประกอบ Clippath เส้นทางคลิปถูกกำหนดโดยใช้องค์ประกอบ Clippath จากนั้นอ้างอิงโดยใช้แอตทริบิวต์คลิปพา ธClippath สามารถมีองค์ประกอบพา ธ องค์ประกอบข้อความองค์ประกอบกราฟิกพื้นฐาน (วงกลม ฯลฯ ) และใช้องค์ประกอบ หากเป็นองค์ประกอบการใช้งานจะต้องอ้างถึงเส้นทางข้อความหรือองค์ประกอบกราฟิกพื้นฐานโดยตรงและองค์ประกอบอื่น ๆ ไม่สามารถอ้างอิงได้
โปรดทราบว่าเส้นทางการตัดเป็นเพียงชั้นหน้ากากของหนึ่งบิตซึ่งเป็นสหภาพขององค์ประกอบทั้งหมดที่มีอยู่ วัตถุในคอลเลกชันนี้สามารถแสดงได้และวัตถุที่ไม่ได้อยู่ในช่วงนี้จะไม่ปรากฏขึ้น อัลกอริทึมที่มีจุดตัดสินเฉพาะไม่ได้อยู่ในช่วงที่ระบุโดยแอตทริบิวต์คลิปกฎ
สำหรับวัตถุกราฟิกเส้นทางคลิปจะเท่ากับการรวมกันของเส้นทางคลิปที่ตั้งไว้ด้วยตัวเองด้วยเส้นทางคลิปขององค์ประกอบด้านนอกทั้งหมด (รวมถึงเส้นทางคลิปที่กำหนดโดยคลิปพา ธ และล้น) บางจุดควรทราบ:
1. องค์ประกอบ Clippath นั้นไม่ได้สืบทอดเส้นทางคลิปที่กำหนด Clippath จากโหนดด้านนอก
2. องค์ประกอบ Clippath เองสามารถตั้งค่าแอตทริบิวต์คลิปพา ธ เอฟเฟกต์คือจุดตัดของสองเส้นทาง
3. แอตทริบิวต์คลิปพา ธ สามารถตั้งค่าสำหรับองค์ประกอบเด็กขององค์ประกอบ Clippath: เอฟเฟกต์คือการรวมกันของสองเส้นทาง
4. เส้นทางตัดที่ว่างเปล่าจะตัดเนื้อหาทั้งหมดในองค์ประกอบ
นี่คือคุณลักษณะที่สำคัญบางประการ:
clippathunits = userspaceonuse ( ค่าเริ่มต้น ) | ObjectBoundingbox แอตทริบิวต์นี้กำหนดระบบพิกัดที่ใช้โดยองค์ประกอบ Clippath เราคุ้นเคยกับค่าทั้งสองนี้คือระบบพิกัดผู้ใช้ที่ใช้องค์ประกอบที่อ้างอิงเส้นทางคลิปปัจจุบันและค่าสัดส่วนกล่องขอบเขตองค์ประกอบ Clippath ไม่เคยแสดงผลโดยตรงและอ้างอิงผ่านคลิปพา ธ ดังนั้นการตั้งค่าแอตทริบิวต์การแสดงผลขององค์ประกอบ Clippath ไม่มีผล
clip-path = <url ( #Clipping pathName )> | ไม่มีการสืบทอด จำเป็นต้องพูดแอตทริบิวต์นี้ใช้เพื่ออ้างถึงเส้นทางการตัด ควรสังเกตที่นี่ว่าองค์ประกอบคอนเทนเนอร์ทั้งหมดองค์ประกอบกราฟิกพื้นฐานและองค์ประกอบ Clippath สามารถใช้แอตทริบิวต์นี้ได้ Clip-rule = nonzero ( ค่าเริ่มต้น ) | Evendd | สืบทอด คุณสมบัตินี้ใช้เพื่อกำหนดจุดใดที่เป็นของจุดภายในกำลังตัด นี่เป็นเรื่องง่ายที่จะตัดสินกราฟิกแบบปิดง่าย แต่สำหรับกราฟิกที่ซับซ้อนที่มีรูภายในมีความแตกต่าง ค่าของคุณสมบัตินี้มีความหมายเช่นเดียวกับค่าของการเติมกฎ:Nonzero: อัลกอริทึมที่ใช้สำหรับค่านี้คือการปล่อยเส้นจากจุดที่จะตัดสินในทิศทางใด ๆ จากนั้นคำนวณทิศทางของจุดตัดระหว่างรูปและส่วนของเส้น; ผลการคำนวณเริ่มต้นจาก 0 และทุกส่วนของเส้นที่สี่แยกนั้นมาจากซ้ายไปขวาเพิ่ม 1; ทุกส่วนของเส้นที่สี่แยกนั้นมาจากขวาไปซ้ายลบ 1; หลังจากคำนวณจุดตัดทั้งหมดด้วยวิธีนี้หากผลลัพธ์ของการคำนวณนี้ไม่เท่ากับ 0 จุดอยู่ในรูปและต้องกรอก หากค่าเท่ากับ 0 ไม่จำเป็นต้องเติมนอกรูป ดูตัวอย่างต่อไปนี้:
EVENODD: อัลกอริทึมที่ใช้สำหรับค่านี้คือการปล่อยบรรทัดจากจุดที่ต้องตัดสินไปในทิศทางใด ๆ จากนั้นคำนวณจำนวนจุดที่รูปและจุดตัดส่วนของเส้น หากตัวเลขแปลก ๆ จุดจะถูกเปลี่ยนเป็นรูปและต้องกรอกข้อมูล หากตัวเลขอยู่ตรงจุดอยู่นอกรูปและไม่จำเป็นต้องกรอก ดูตัวอย่างในรูปด้านล่าง:
แอตทริบิวต์คลิปกฎสามารถใช้สำหรับองค์ประกอบกราฟิกภายในขององค์ประกอบ Clippath เท่านั้น ตัวอย่างเช่นการตั้งค่าต่อไปนี้ทำงาน:
<g>
<clippath id = "myclip">
<path d = "... " clip-rule = "evenodd" />
</clippath>
<rect clip-path = "url (#myclip)" ... />
</g>
มันไม่ได้ผลถ้าองค์ประกอบไม่ได้อยู่ในคลิปพา ธ ตัวอย่างเช่นการตั้งค่าต่อไปนี้ไม่ทำงาน:
<g clip-rule = "nonzero">
<clippath id = "myclip">
<path d = "... " />
</clippath>
<rect clip-path = "url (#myclip)" clip-rule = "evenodd" ... />
</g>
สุดท้ายมาดูตัวอย่างเล็ก ๆ ของเส้นทางการตัด:
<svg>
<g>
<clippath id = "myclip">
<path d = "m 10,10 l 10,20 l 20,20 l 20,10 z" clip-rule = "evenodd" />
</clippath>
</g>
<rect clip-path = "url (#myclip)" x = "10" y = "10" fill = "red" />>>>
</svg>
มองเห็นเฉพาะพื้นที่ของมุมบนซ้ายของสี่เหลี่ยม
มาสก์ - องค์ประกอบหน้ากาก ใน SVG คุณสามารถกำหนดองค์ประกอบกราฟิกหรือองค์ประกอบ G เป็นหน้ากากกับวัตถุที่แสดงผลเพื่อรวมวัตถุที่แสดงผลไว้ในพื้นหลังหน้ากากถูกกำหนดโดยองค์ประกอบหน้ากาก เมื่อใช้หน้ากากคุณจะต้องอ้างอิงหน้ากากในแอตทริบิวต์หน้ากากของวัตถุ
องค์ประกอบหน้ากากอาจมีองค์ประกอบกราฟิกและองค์ประกอบคอนเทนเนอร์ (เช่น G)
ในความเป็นจริงทุกคนชัดเจนเกี่ยวกับผลกระทบของหน้ากาก โดยพื้นฐานแล้วมันคือการคำนวณความโปร่งใสขั้นสุดท้ายตามสีและความโปร่งใสของแต่ละจุดในหน้ากาก จากนั้นเมื่อแสดงผลวัตถุเลเยอร์หน้ากากที่มีความโปร่งใสที่แตกต่างกันจะถูกปกคลุมไปด้วยวัตถุซึ่งสะท้อนให้เห็นถึงผลการปิดบังของหน้ากาก สำหรับวัตถุที่แสดงผลเฉพาะชิ้นส่วนภายในหน้ากากเท่านั้นที่จะแสดงผลตามความโปร่งใสของจุดบนหน้ากากและชิ้นส่วนที่อยู่นอกหน้ากากจะไม่ปรากฏขึ้น ดูตัวอย่างต่อไปนี้:
<svg viewbox = "0 0 800 300" เวอร์ชัน = "1.1"
xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">
<defs>
<linearGradient id = "gradient" gradientunits = "userspaceonuse"
x1 = "0" y1 = "0" x2 = "800" y2 = "0">
<stop Offset = "0" stop-color = "White" stop-opacity = "0" />
<stop Offset = "1" stop-color = "white" stop-opacity = "1" />>
</lineargradient>
<mask id = "mask" maskunits = "UsersPaceOnuse"
x = "0" y = "0">
<rect x = "0" y = "0" fill = "url (#gradient)" />
</mask>
<text id = "text" x = "400" y = "200"
font-family = "verdana" font-size = "100" text-anchor = "middle">
ข้อความสวมหน้ากาก
</text>
</defs>
<!-พื้นหลังของหน้าต่าง->
<rect x = "0" y = "0" fill = "#ff8080" />
<!- ขั้นตอนแรกคือการวาดข้อความด้วยหน้ากากและคุณจะเห็นว่าเอฟเฟกต์ความโปร่งใสของหน้ากากถูกนำไปใช้กับคำ
ขั้นตอนที่สองคือการวาดข้อความโดยไม่มีหน้ากากเป็นโครงร่างของข้อความในขั้นตอนแรก ->
<ใช้ xlink: href = "#text" fill = "blue" mask = "url (#mask)" />
<ใช้ xlink: href = "#text" fill = "none" stroke = "black" stroke-width = "2" />
</svg>
เอฟเฟกต์แสดงในรูปด้านล่าง:
คุณสามารถลองเปลี่ยนความกว้างขององค์ประกอบ rect ในองค์ประกอบหน้ากากด้านบนเป็น 500 คุณจะเห็นว่าส่วนหนึ่งของข้อความไม่ปรากฏขึ้นเนื่องจากส่วนนั้นเกินขอบเขตของหน้ากาก อย่างที่คุณเห็นได้ที่นี่เส้นทางการตัดด้านบนเป็นเพียงหน้ากากพิเศษ (ความโปร่งใสของแต่ละจุดคือ 0 หรือ 1)
มีการแนะนำคำจำกัดความและการใช้หน้ากาก มาดูคุณลักษณะที่สำคัญหลายประการ:
maskunits = userspaceonuse | ObjectBoundingBox (ค่าเริ่มต้น) ระบบพิกัดที่กำหนดพิกัด (x, y) และความยาว (ความกว้าง, ความสูง) ในองค์ประกอบหน้ากาก: ระบบพิกัดผู้ใช้ที่อ้างถึงองค์ประกอบของหน้ากากหรือค่าสัมพัทธ์ของกล่องขอบเขตที่สัมพันธ์กับองค์ประกอบของหน้ากากอ้างอิง ความหมายของค่านี้เหมือนกับความหมายของหน่วยในบทก่อนหน้า maskContentUnits = userspaceonuse (ค่าเริ่มต้น) | ObjectBoundingbox กำหนดระบบพิกัดขององค์ประกอบเด็กในองค์ประกอบหน้ากาก x, y, ความกว้าง, ความสูง กำหนดตำแหน่งและขนาดของหน้ากาก ภายใต้พิกัด ObjectBoundingBox เริ่มต้นค่าเริ่มต้นคือ -10%, -10%, 120%และ 120% หมายเหตุ : หน้ากากจะไม่แสดงผลโดยตรงมันจะทำงานเฉพาะในสถานที่อ้างอิงดังนั้นการแสดงความทึบและแอตทริบิวต์อื่น ๆ ไม่ทำงานสำหรับองค์ประกอบหน้ากาก การอ้างอิงเชิงปฏิบัติ: ดัชนีสคริปต์: 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/