SVG Drop Shadows
<defs> และ <filter>
ตัวกรอง SVG ทั้งหมดถูกกำหนดไว้ภายในองค์ประกอบ <defs> <defs> องค์ประกอบสั้นสำหรับคำจำกัดความและมีคำจำกัดความขององค์ประกอบพิเศษ (เช่นตัวกรอง)
<filter> องค์ประกอบใช้เพื่อกำหนดตัวกรอง SVG <filter> องค์ประกอบมีแอตทริบิวต์ id ที่จำเป็นซึ่งระบุตัวกรอง กราฟิกจะชี้ไปที่ตัวกรองที่จะใช้
SVG <feOffset>
ตัวอย่าง 1
<feOffset> องค์ประกอบที่ใช้เพื่อสร้างเอฟเฟกต์เงาตกกระทบ แนวคิดคือการใช้กราฟิก SVG (รูปภาพหรือองค์ประกอบ) และขยับเล็กน้อยในระนาบ xy
ตัวอย่างแรกจะออฟเซ็ตรูปสี่เหลี่ยมผืนผ้า (ด้วย <feOffset>) จากนั้นผสมผสานต้นฉบับที่ด้านบนของรูปภาพออฟเซ็ต (ด้วย <feBlend>):
นี่คือรหัส SVG:
ตัวอย่าง
<svg height="120" width="120">
<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>
คำอธิบายรหัส:
- id แอตทริบิวต์ของ <filter> องค์ประกอบกำหนดชื่อเฉพาะสำหรับ filter
- แอตทริบิวต์ตัวกรองขององค์ประกอบ <rect> เชื่อมโยงองค์ประกอบกับตัวกรอง "f1"
ตัวอย่าง 2
ตอนนี้ ภาพออฟเซ็ตสามารถเบลอได้ (ด้วย <feGaussianBlur>):
นี่คือรหัส SVG:
ตัวอย่าง
<svg height="140" width="140">
<defs>
<filter id="f2" 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(#f2)" />
</svg>
คำอธิบายรหัส:
- แอตทริบิวต์ stdDeviation ขององค์ประกอบ <feGaussianBlur> กำหนดปริมาณของ blur
ตัวอย่างที่ 3
ตอนนี้ทำให้เงาดำ:
นี่คือรหัส SVG:
ตัวอย่าง
<svg height="140" width="140">
<defs>
<filter id="f3" 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(#f3)" />
</svg>
คำอธิบายรหัส:
- แอตทริบิวต์ในองค์ประกอบ <feOffset> เปลี่ยนเป็น "SourceAlpha" ซึ่งใช้ช่องอัลฟ่าสำหรับการเบลอแทนพิกเซล RGBA ทั้งหมด
ตัวอย่างที่ 4
ตอนนี้ ให้รักษาเงาเป็นสี:
นี่คือรหัส SVG:
ตัวอย่าง
<svg height="140" width="140">
<defs>
<filter id="f4" 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(#f4)" />
</svg>
คำอธิบายรหัส:
- ฟิลเตอร์ <feColorMatrix> ใช้เพื่อเปลี่ยนสีในภาพออฟเซ็ตให้ใกล้เคียงกับสีดำมากขึ้น ค่า '0.2' สามค่าในเมทริกซ์ทั้งหมดจะถูกคูณด้วยช่องสีแดง สีเขียว และสีน้ำเงิน การลดค่าของมันจะทำให้สีเข้าใกล้สีดำมากขึ้น (สีดำคือ 0)