ตัวกรองถือได้ว่าเป็นคุณสมบัติที่ทรงพลังที่สุดของ SVG พวกเขาช่วยให้คุณเพิ่มเอฟเฟกต์ตัวกรองที่มีเฉพาะในซอฟต์แวร์ระดับมืออาชีพลงในกราฟิก (องค์ประกอบกราฟิกและองค์ประกอบคอนเทนเนอร์) สิ่งนี้ทำให้ง่ายสำหรับคุณในการสร้างและแก้ไขภาพทางฝั่งไคลเอ็นต์ ยิ่งกว่านั้นตัวกรองไม่ได้ทำลายโครงสร้างของเอกสารต้นฉบับดังนั้นจึงสามารถบำรุงรักษาได้เช่นกัน
ตัวกรองถูกกำหนดโดยองค์ประกอบตัวกรอง : เมื่อจำเป็นให้เพิ่มแอตทริบิวต์ตัวกรองลงในกราฟิกหรือคอนเทนเนอร์ที่ต้องใช้เอฟเฟกต์ตัวกรองและอ้างอิงตัวกรองที่เกี่ยวข้ององค์ประกอบตัวกรองมีการดำเนินการอะตอมตัวกรองจำนวนมาก การดำเนินการอะตอมแต่ละครั้งดำเนินการกราฟิกพื้นฐานบนวัตถุที่เข้ามาและสร้างเอาต์พุตกราฟิก การดำเนินการอะตอมส่วนใหญ่สร้างผลลัพธ์โดยทั่วไปเป็นภาพ RGBA อินพุตไปยังการดำเนินการอะตอมแต่ละครั้งอาจเป็นกราฟต้นทางหรือผลลัพธ์ของการดำเนินการอะตอมอื่น ๆ ดังนั้นกระบวนการอ้างถึงเอฟเฟกต์ตัวกรองคือการใช้การดำเนินการอะตอมตัวกรองที่เกี่ยวข้องกับกราฟิกต้นทางและในที่สุดก็สร้างกราฟิกใหม่และแสดงผล
เมื่อใช้แอตทริบิวต์ตัวกรองบนคอนเทนเนอร์ (เช่นองค์ประกอบ G) เอฟเฟกต์ตัวกรองจะถูกนำไปใช้กับองค์ประกอบทั้งหมดในคอนเทนเนอร์ อย่างไรก็ตามองค์ประกอบในคอนเทนเนอร์จะไม่แสดงผลโดยตรงไปยังหน้าจอ แต่จะถูกเก็บไว้ชั่วคราว คำสั่งกราฟิกจะถูกดำเนินการเป็นส่วนหนึ่งของกระบวนการประมวลผลองค์ประกอบตัวกรองอ้างอิงจากนั้นแสดงผล สิ่งนี้ถูกระบุโดยใช้ SourceGraphic และ SourceAlpha เอฟเฟกต์นี้แสดงให้เห็นในกรณีที่สามในตัวอย่างที่สองด้านล่าง
เอฟเฟกต์ตัวกรองบางอย่างจะสร้างจุดพิกเซลที่ไม่ได้กำหนดซึ่งจะถูกประมวลผลเป็นเอฟเฟกต์โปร่งใส
ลองมาดูตัวอย่าง:
<svg viewbox = "0 0 200 120"
xmlns = "http://www.w3.org/2000/svg" เวอร์ชัน = "1.1">
<title> ตัวอย่างเอฟเฟกต์ตัวกรอง SVG </title>
<Sc> ใช้เอฟเฟกต์ตัวกรองต่าง ๆ เพื่อให้ได้เอฟเฟกต์แสง 3 มิติของกราฟิกคู่หนึ่ง </desc>
<defs>
<filter id = "myFilter" filterunits = "userspaceonuse" x = "0" y = "0">
<fegaussianblur ใน = "sourcealpha" stddeviation = "4" result = "เบลอ"/>
<feoffset ใน = "เบลอ" dx = "4" dy = "4" result = "OffsetBlur"/>
<fespecularlighting ใน = "เบลอ" surfacescale = "5" specularConstant = ". 75"
specularexponent = "20" แสงสี = "#bbbbbbb"
result = "specout">
<fepointlight x = "-5000" y = "-10,000" z = "20000"/>
</fescularlighting>
<fecomposite in = "specout" in2 = "sourcealpha" operator = "in" result = "specout"/>
<fecomposite in = "sourcegraphic" in2 = "specout" operator = "arithmetic"
k1 = "0" k2 = "1" k3 = "1" k4 = "0" result = "litpaint"/>
<Semerge>
<femergenode ใน = "OffsetBlur"/>>
<femergenode ใน = "litpaint"/>>>
</bemerge>
</tilter>
</defs>
<rect x = "1" y = "1" fill = "#88888" stroke = "blue" />
<g filter = "url (#MyFilter)">
<g>
<path fill = "none" stroke = "#d90000" stroke-width = "10"
D = "M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill = "#d90000"
D = "M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 Z" />
<g fill = "#ffffff" stroke = "black" font-size = "45" font-family = "verdana">
<text x = "52" y = "76"> svg </text>
</g>
</g>
</g>
</svg>
ผลของตัวอย่างนี้ที่ทำงานบน Firefox เป็นผลมาจากภาพสุดท้าย:
หมายเหตุ: อาจมีความแตกต่างในเบราว์เซอร์อื่น ๆ
ตัวกรองนี้ใช้เอฟเฟกต์ 6 รายการในทางกลับกัน (การแสดงผลขั้นตอนเดียวจะแสดงในภาพด้านบน :):
Fegaussianblur: ขั้นตอนนี้คือการดำเนินการประมวลผลแบบเกาส์เบลอ; อินพุตของเอฟเฟกต์พิเศษนี้คือค่าความโปร่งใสของภาพต้นทางและเอาต์พุตจะถูกเก็บไว้ในเบลอบัฟเฟอร์ชั่วคราว ค่าเบลอถูกใช้เป็นอินพุตของ feoffset และ fescularlighting ด้านล่าง
Feoffset: ขั้นตอนนี้คือการแปลภาพเป็นบางตำแหน่ง อินพุตของเอฟเฟกต์นี้คือเบลอที่สร้างขึ้นในขั้นตอนก่อนหน้าสร้างแคชใหม่ OffsetBlur
Fespecularlighting: ขั้นตอนนี้คือการประมวลผลพื้นผิวของภาพด้วยแสง อินพุตคือเบลอที่สร้างขึ้นในขั้นตอนแรกและเอาต์พุตจะถูกเก็บไว้ในสเปคแคชใหม่
FOCOMPOSITION สองครั้ง: สองขั้นตอนนี้กำลังรวมเลเยอร์แคชที่แตกต่างกัน
FEMERGE: ขั้นตอนนี้คือการรวมเลเยอร์ที่แตกต่างกัน ขั้นตอนนี้มักจะเป็นขั้นตอนสุดท้ายหลอมรวมเลเยอร์ของแต่ละแคชสร้างภาพสุดท้ายและแสดงผล แม้ว่าขั้นตอนนี้จะเสร็จสมบูรณ์ด้วยเอฟเฟกต์พิเศษ focomposite หลายครั้ง แต่ก็ยังไม่สะดวกมากนัก
องค์ประกอบตัวกรองและพื้นที่เอฟเฟกต์ตัวกรอง พื้นที่เอฟเฟกต์ตัวกรองหมายถึงพื้นที่ที่เอฟเฟกต์ตัวกรองทำงาน ขนาดของพื้นที่นี้ถูกกำหนดโดยคุณสมบัติต่อไปนี้ขององค์ประกอบตัวกรอง: filterunits = userspaceonuse | ObjectBoundingboxคุณสมบัตินี้กำหนดพื้นที่พิกัดที่ใช้โดย x, y, ความกว้างและความสูง เช่นเดียวกับคุณสมบัติที่เกี่ยวข้องกับหน่วยอื่น ๆ คุณสมบัตินี้มีสองค่า: Userspaceonuse และ ObjectBoundingBox (ค่าเริ่มต้น)
Userspaceonuse แสดงถึงระบบพิกัดผู้ใช้ที่ใช้องค์ประกอบที่อ้างอิงองค์ประกอบตัวกรอง
ObjectBoundingBox หมายถึงการใช้เปอร์เซ็นต์ของกล่องขอบเขตที่อ้างอิงองค์ประกอบตัวกรองเป็นช่วงค่า
x, y, ความกว้าง, ความสูงคุณสมบัติเหล่านี้กำหนดพื้นที่สี่เหลี่ยมที่ตัวกรองทำงาน เอฟเฟกต์ตัวกรองจะไม่ถูกนำไปใช้กับคะแนนที่อยู่นอกเหนือพื้นที่นี้ ค่าเริ่มต้นของ x, y คือ -10%และค่าเริ่มต้นของความกว้างและความสูงคือ 120%
ตัวกรองคุณสมบัตินี้กำหนดขนาดของพื้นที่แคชกลางดังนั้นจึงกำหนดคุณภาพของภาพแคช โดยปกติจะไม่จำเป็นต้องใช้ค่านี้และเบราว์เซอร์จะเลือกค่าที่เหมาะสม โดยทั่วไปพื้นที่เอฟเฟกต์ตัวกรองควรกำหนดให้สอดคล้องกับจุดพื้นหลังและจุดหนึ่งทีละหนึ่งซึ่งจะนำมาซึ่งข้อได้เปรียบที่มีประสิทธิภาพ
นอกเหนือจากคุณสมบัติเหล่านี้คุณสมบัติต่อไปนี้ขององค์ประกอบตัวกรองก็มีความสำคัญเช่นกัน:
primitiveUnits = userspaceonuse | ObjectBoundingboxคุณสมบัตินี้กำหนดพื้นที่พิกัดที่ใช้โดยพิกัดและความยาวในการดำเนินการอะตอมแต่ละครั้ง ค่าของคุณสมบัตินี้คือ Userspaceonuse และ ObjectBoundingbox แต่ค่าเริ่มต้นคือ Userspaceonuse
xlink: href = <iri>คุณสมบัตินี้ใช้เพื่ออ้างถึงองค์ประกอบตัวกรองอื่น ๆ ในองค์ประกอบตัวกรองปัจจุบัน
เป็นที่น่าสังเกตว่าองค์ประกอบตัวกรองจะสืบทอดแอตทริบิวต์ของโหนดพาเรนต์เท่านั้นและจะไม่สืบทอดคุณลักษณะขององค์ประกอบที่อ้างอิงองค์ประกอบตัวกรอง
ภาพรวมตัวกรอง การดำเนินการแบบอะตอมตัวกรองต่างๆจะไม่ถูกอธิบายอย่างละเอียด คุณสามารถตรวจสอบเอกสารอย่างเป็นทางการเมื่อจำเป็น ลองมาดูความสามัคคีของการดำเนินการเหล่านี้ ยกเว้นในแอตทริบิวต์ในแอตทริบิวต์อื่น ๆ ด้านล่างมีให้สำหรับการดำเนินการอะตอมทั้งหมด x, y, ความกว้าง, ความสูง ฉันจะไม่พูดอะไรมากมายเกี่ยวกับคุณสมบัติเหล่านี้ พวกเขากำหนดพื้นที่ที่อะตอมตัวกรองทำงานดังนั้นมันอาจกลายเป็นพื้นที่ตัวกรอง แอตทริบิวต์เหล่านี้ถูก จำกัด โดยพื้นที่การกระทำขององค์ประกอบตัวกรอง โดยค่าเริ่มต้นค่าคือ 0, 0, 100% และ 100% ตามลำดับ ภูมิภาคของการกระทำของอะตอมเหล่านี้เกินกว่าองค์ประกอบตัวกรองไม่ทำงาน ผลลัพธ์เก็บผลลัพธ์ของขั้นตอนนี้ หลังจากระบุผลลัพธ์การดำเนินการอื่น ๆ ที่ตามมาขององค์ประกอบตัวกรองเดียวกันสามารถระบุได้ว่าเป็นอินพุตที่ใช้ในคุณจะรู้สิ่งนี้โดยอ้างถึงตัวอย่างด้านบน หากค่านี้ถูกละเว้นจะสามารถใช้เป็นอินพุตโดยนัยสำหรับขั้นตอนถัดไปเท่านั้น โปรดทราบว่าหากขั้นตอนถัดไปได้ระบุอินพุตแล้วด้วยการระบุในขั้นตอนถัดไปจะมีผลเหนือกว่า
ในระบุอินพุตสำหรับขั้นตอนนี้ หากแอตทริบิวต์ถูกละเว้นผลลัพธ์ของขั้นตอนก่อนหน้านี้จะถูกใช้โดยค่าเริ่มต้นเป็นอินพุตของขั้นตอนนี้ หากมีการละเว้นขั้นตอนใน SourceGraphic จะถูกใช้เป็นค่า (ดูคำอธิบายด้านล่าง) แอตทริบิวต์ในสามารถอ้างถึงค่าที่เก็บไว้ในผลลัพธ์ก่อนหน้าหรือ ระบุ 6 ค่าพิเศษต่อไปนี้ :
SourceGraphic: ค่านี้แสดงถึงอินพุตเพื่อใช้องค์ประกอบกราฟปัจจุบันเป็นการดำเนินการ
SourceAlpha: ค่านี้แสดงถึงอินพุตเพื่อใช้ค่าอัลฟ่าขององค์ประกอบกราฟปัจจุบันเป็นการดำเนินการ
ความเป็นมา: ค่านี้แสดงถึงการใช้ภาพหน้าจอพื้นหลังปัจจุบันเป็นอินพุตไปยังการดำเนินการ
BackgroundAlpha: ค่านี้แสดงถึงอินพุตของการดำเนินการโดยใช้ค่าอัลฟ่าของหน้าจอพื้นหลังปัจจุบัน
FillPaint: ค่านี้ใช้ค่าของแอตทริบิวต์การเติมขององค์ประกอบกราฟปัจจุบันเป็นอินพุตไปยังการดำเนินการ
StrokePaint: ค่านี้ใช้ค่าของแอตทริบิวต์ Stroke ขององค์ประกอบกราฟิกปัจจุบันเป็นอินพุตไปยังการดำเนินการ
ในบรรดาค่าเหล่านี้ความเป็นมาและพื้นหลังอาจเป็นเรื่องยากที่จะเข้าใจ มาดูค่าทั้งสองนี้ด้านล่าง
เข้าถึงภาพหน้าจอพื้นหลัง โดยปกติเราสามารถใช้ภาพหน้าจอพื้นหลังขององค์ประกอบที่อ้างอิงองค์ประกอบตัวกรองเป็นภาพต้นทางของเอฟเฟกต์ตัวกรองโดยตรง ค่าที่เป็นตัวแทนของอินพุตนี้คือพื้นหลังและพื้นหลังอัลฟาค่าก่อนหน้านี้มีค่าสีและอัลฟ่าและหลังมีค่าอัลฟ่าเท่านั้น เพื่อสนับสนุนการใช้งานนี้จำเป็นต้องเปิดใช้งานคุณสมบัตินี้อย่างชัดเจนในองค์ประกอบที่อ้างอิงองค์ประกอบตัวกรองซึ่งต้องตั้งค่าคุณสมบัติการเปิดใช้งานขององค์ประกอบ เปิดใช้งาน background = สะสม | ใหม่ [<x> <y> <width> <ความสูง>] | สืบทอดคุณสมบัตินี้สามารถใช้สำหรับองค์ประกอบคอนเทนเนอร์เท่านั้นและกำหนดวิธีการใช้ภาพหน้าจอพื้นหลัง
ค่าใหม่แสดงถึง: อนุญาตให้องค์ประกอบลูกของคอนเทนเนอร์เข้าถึงภาพหน้าจอพื้นหลังของคอนเทนเนอร์และองค์ประกอบลูกของคอนเทนเนอร์จะแสดงผลไปยังพื้นหลังและบนอุปกรณ์
การสะสมเป็นค่าเริ่มต้นและผลกระทบขึ้นอยู่กับบริบท: หากองค์ประกอบคอนเทนเนอร์พาเรนต์ใช้ enable-background: ใหม่องค์ประกอบกราฟิกทั้งหมดของคอนเทนเนอร์จะเข้าร่วมในการแสดงผลของพื้นหลัง มิฉะนั้นหมายความว่าคอนเทนเนอร์หลักยังไม่พร้อมที่จะถ่ายภาพหน้าจอพื้นหลังและการแสดงองค์ประกอบกราฟิกขององค์ประกอบนี้จะแสดงบนอุปกรณ์เท่านั้น
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลกระทบของค่าเหล่านี้:
<svg viewbox = "0 0 1350 270"
xmlns = "http://www.w3.org/2000/svg" เวอร์ชัน = "1.1">
<title> ตัวอย่างของการใช้ภาพหน้าจอพื้นหลัง </title>
<Sc> ตัวอย่างต่อไปนี้อธิบายการใช้ภาพหน้าจอพื้นหลังในสถานการณ์ต่าง ๆ </sc>
<defs>
<filter id = "shiftbgandblur"
filterunits = "userspaceonuse" x = "0" y = "0">
<Sc> ตัวกรองนี้จะทิ้งภาพต้นทาง แต่ใช้ภาพหน้าจอพื้นหลัง </sc>
<feoffset in = "backgroundimage" dx = "0" dy = "125" />
<fegaussianblur stddeviation = "8" />
</tilter>
<filter id = "shiftbgandblur_withsourcegraphic"
filterunits = "userspaceonuse" x = "0" y = "0">
<Sc> เอฟเฟกต์พิเศษตัวกรองนี้รวมภาพหน้าจอพื้นหลังและรูปภาพขององค์ประกอบปัจจุบัน </esc>
<feoffset in = "backgroundimage" dx = "0" dy = "125" />
<fegaussianblur stddeviation = "8" result = "เบลอ" />>
<Semerge>
<femergenode ใน = "เบลอ"/>>>
<femergenode in = "sourcegraphic"/>>
</bemerge>
</tilter>
</defs>
<g transform = "แปล (0,0)">
<Sc> ภาพแรกคือเอฟเฟกต์ของการไม่เพิ่มตัวกรอง </esc>
<rect x = "25" y = "25" fill = "red"/>>
<g opacity = ". 5">
<circle cx = "125" cy = "75" r = "45" fill = "green"/>>>>>>>>
<Polygon Points = "160,25 160,125 240,75" Fill = "Blue"/>>>>
</g>
<rect x = "5" y = "5" fill = "none" stroke = "blue"/>>>>>>
</g>
<g enable-background = "new" transform = "แปล (270,0)">
<Sc> ภาพที่สองคือการใช้เอฟเฟกต์ตัวกรองบนคอนเทนเนอร์ </sc>
<rect x = "25" y = "25" fill = "red"/>>
<g opacity = ". 5">
<circle cx = "125" cy = "75" r = "45" fill = "green"/>>>>>>>>
<Polygon Points = "160,25 160,125 240,75" Fill = "Blue"/>>>>
</g>
<g filter = "url (#shiftbgandblur)"/>
<rect x = "5" y = "5" fill = "none" stroke = "blue"/>>>>>>
</g>
<g enable-background = "new" transform = "แปล (540,0)">>
<Sc> ภาพที่สามคือการใช้เอฟเฟกต์ตัวกรองในคอนเทนเนอร์ภายในให้ความสนใจกับความแตกต่างจากภาพที่สอง </esc>
<rect x = "25" y = "25" fill = "red"/>>
<g filter = "url (#shiftbgandblur)" opacity = ". 5">
<circle cx = "125" cy = "75" r = "45" fill = "green"/>>>>>>>>
<Polygon Points = "160,25 160,125 240,75" Fill = "Blue"/>>>>
</g>
<rect x = "5" y = "5" fill = "none" stroke = "blue"/>>>>>>
</g>
<g enable-background = "new" transform = "แปล (810,0)">
<Sc> ภาพที่สี่คือการใช้เอฟเฟกต์ตัวกรองกับองค์ประกอบกราฟิก </sc>
<rect x = "25" y = "25" fill = "red"/>>
<g opacity = ". 5">
<circle cx = "125" cy = "75" r = "45" fill = "green"/>>>>>>>>
<Polygon Points = "160,25 160,125 240,75" Fill = "Blue"
filter = "url (#shiftbgandblur)"/>
</g>
<rect x = "5" y = "5" fill = "none" stroke = "blue"/>>>>>>
</g>
<g enable-background = "new" transform = "แปล (1080,0)">
<Sc> ภาพที่ห้าคือการใช้เอฟเฟกต์ตัวกรองที่แตกต่างกันในองค์ประกอบกราฟิก </sc>
<rect x = "25" y = "25" fill = "red"/>>
<g opacity = ". 5">
<circle cx = "125" cy = "75" r = "45" fill = "green"/>>>>>>>>
<Polygon Points = "160,25 160,125 240,75" Fill = "Blue"
filter = "url (#shiftbgandblur_withsourcegraphic)"/>
</g>
<rect x = "5" y = "5" fill = "none" stroke = "blue"/>>>>>>
</g>
</svg>
การเรนเดอร์มีดังนี้ (แถวแรกคือการเรนเดอร์สุดท้ายและแถวที่สองคือเอฟเฟกต์ตัวกรอง):
ตัวอย่างนี้มี 5 ส่วน :1. รูปภาพในกลุ่มแรกไม่ใช้เอฟเฟกต์ตัวกรองใด ๆ
2. กลุ่มที่สองใช้ภาพเดียวกัน แต่เปิดใช้งานเอฟเฟกต์ของการใช้พื้นหลัง
3. กลุ่มที่สามใช้ภาพเดียวกัน แต่ใช้เอฟเฟกต์ตัวกรองในคอนเทนเนอร์ภายใน
4. กลุ่มที่สี่ใช้เอฟเฟกต์ตัวกรองกับองค์ประกอบของคอนเทนเนอร์เนื้อหา
5. กลุ่มสุดท้ายใช้เอฟเฟกต์ตัวกรองเดียวกันกับกลุ่มที่สี่และรวมภาพต้นทาง
แนวคิดของตัวกรองนั้นง่ายมาก แต่รหัสสำหรับแต่ละเอฟเฟกต์นั้นดูซับซ้อนกว่า ในความเป็นจริงเราจะชัดเจนหลังจากลอง อย่างไรก็ตามเนื่องจากเบราว์เซอร์ที่แตกต่างกันรองรับ 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/