<defs> และ <Filter>
ตัวกรองอินเทอร์เน็ต SVG มีการกำหนดภายใน <defs> องค์ประกอบ <defs> องค์ประกอบสั้นสำหรับคำจำกัดความและมีความหมายขององค์ประกอบพิเศษ (such as filters)
<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>
ลองตัวเอง» Code explanation:
- id แอตทริบิวต์ของ <filter> องค์ประกอบกำหนดชื่อที่ไม่ซ้ำสำหรับตัวกรอง
- ผลเบลอจะถูกกำหนดด้วย <feGaussianBlur> องค์ประกอบ
- in="SourceGraphic" ส่วนหนึ่งกำหนดว่าผลที่ถูกสร้างขึ้นสำหรับองค์ประกอบทั้งหมด
- stdDeviation แอตทริบิวต์กำหนดจำนวนเงินของการเบลอที่
- filter แอตทริบิวต์ของ <rect> องค์ประกอบเชื่อมโยงองค์ประกอบไปที่ "f1" กรอง