เงา SVG
หมายเหตุ: Internet Explorer และ Safari ไม่สนับสนุน SVG ฟิลเตอร์!
<Defs> และ <Filter>
SVG กรองอินเทอร์เน็ตทั้งหมดกำหนดไว้ใน <defs> องค์ประกอบ <Defs> องค์ประกอบที่กำหนดในระยะสั้นและมีองค์ประกอบพิเศษ (เช่นฟิลเตอร์) นิยาม
<กรอง> แท็กใช้เพื่อกำหนดตัวกรอง SVG <กรอง> แท็กที่มีแอตทริบิวต์ ID ที่จำเป็นในการกำหนดโปรแกรมกราฟิกที่กรอง?
SVG <feOffset>
ตัวอย่างที่ 1
<FeOffset> องค์ประกอบที่จะใช้ในการสร้างผลเงา ความคิดที่จะใช้ SVG กราฟิก (หรือองค์ประกอบภาพ) และย้ายไปรอบ ๆ เล็ก ๆ น้อย ๆ ในระนาบ xy
ตัวอย่างแรกชดเชยสี่เหลี่ยมผืนผ้า (กับ <feOffset>) แล้วผสมด้านบนชดเชยของภาพ (รวม <feBlend>):
นี่คือรหัส SVG:
ตัวอย่าง
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
ลอง»
สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)
การวิเคราะห์รหัสสินค้า:
- เพียงชื่อเดียว <Filter> แอตทริบิวต์ขององค์ประกอบ ID กำหนดตัวกรอง
- กรองคุณสมบัติ <RECT> องค์ประกอบที่จะใช้ในการเชื่อมโยงองค์ประกอบที่จะ "F1" ตัวกรอง
ตัวอย่างที่ 2
ตอนนี้คุณสามารถเปลี่ยนภาพจะเบลอ (ที่มี <feGaussianBlur>):
นี่คือรหัส SVG:
ตัวอย่าง
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
ลอง»
สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)
การวิเคราะห์รหัสสินค้า:
- stdDeviation <feGaussianBlur> คุณสมบัติองค์ประกอบกำหนดปริมาณของการทำให้เปรอะเปื้อน
ตัวอย่างที่ 3
ตอนนี้ให้เป็นเงาสีดำ:
นี่คือรหัส SVG:
ตัวอย่าง
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
ลอง»
สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)
การวิเคราะห์รหัสสินค้า:
- คุณสมบัติ <feOffset> องค์ประกอบที่ "SourceAlpha" การใช้ภาพเบลอในช่องทางอัลฟามากกว่าพิกเซล RGBA ทั้งหมด
ตัวอย่างที่ 4
เงาเคลือบในขณะนี้ด้วยสี:
นี่คือรหัส SVG:
ตัวอย่าง
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
ลอง»
สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)
การวิเคราะห์รหัสสินค้า:
- ตัวกรอง <FeColorMatrix> Offset ใช้ในการแปลงภาพที่จะทำให้มันใกล้ชิดกับสีดำ '0.2' ที่จะได้รับสามค่าจะถูกคูณด้วยเมทริกซ์สีแดง, สีเขียว, สีฟ้าและสีช่อง การลดค่าของมันเพื่อนำมาสีเป็นสีดำ (สีดำเป็น 0)