เอฟเฟกต์ SVG เบลอ
<defs> และ <filter>
ตัวกรอง SVG อินเทอร์เน็ตทั้งหมดถูกกำหนดไว้ในองค์ประกอบ <defs> <defs> องค์ประกอบสั้นสำหรับคำจำกัดความและมีคำจำกัดความขององค์ประกอบพิเศษ (เช่นตัวกรอง)
<filter> องค์ประกอบใช้เพื่อกำหนดตัวกรอง SVG <filter> องค์ประกอบมีแอตทริบิวต์ id ที่จำเป็นซึ่งระบุตัวกรอง กราฟิกจะชี้ไปที่ตัวกรองที่จะใช้
SVG <feGaussianBlur>
ตัวอย่าง 1
องค์ประกอบ <feGaussianBlur> ใช้เพื่อสร้างเอฟเฟกต์เบลอ:
นี่คือรหัส SVG:
ตัวอย่าง
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"
/>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
คำอธิบายรหัส:
- id แอตทริบิวต์ของ <filter> องค์ประกอบกำหนดชื่อเฉพาะสำหรับ filter
- เอฟเฟกต์เบลอถูกกำหนดด้วยองค์ประกอบ <feGaussianBlur>
- ส่วน in="SourceGraphic" กำหนดว่าเอฟเฟกต์ถูกสร้างขึ้นสำหรับองค์ประกอบทั้งหมด
- stdDeviation แอตทริบิวต์กำหนดจำนวนของ blur
- แอตทริบิวต์ตัวกรองขององค์ประกอบ <rect> เชื่อมโยงองค์ประกอบกับตัวกรอง "f1"