เบลอ SVG - เกาส์เบลอ
หมายเหตุ: Internet Explorer และ Safari ไม่สนับสนุน SVG ฟิลเตอร์!
<Defs> และ <Filter>
SVG กรองอินเทอร์เน็ตทั้งหมดกำหนดไว้ใน <defs> องค์ประกอบ <Defs> องค์ประกอบที่กำหนดในระยะสั้นและมีองค์ประกอบพิเศษ (เช่นฟิลเตอร์) นิยาม
<กรอง> แท็กใช้เพื่อกำหนดตัวกรอง SVG <กรอง> แท็กที่มีแอตทริบิวต์ ID ที่จำเป็นในการกำหนดโปรแกรมกราฟิกที่กรอง?
SVG <feGaussianBlur>
ตัวอย่างที่ 1
<FeGaussianBlur> องค์ประกอบที่จะใช้ในการสร้างผลเบลอ:
นี่คือรหัส SVG:
ตัวอย่าง
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>
<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>
ลอง»
สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)
การวิเคราะห์รหัสสินค้า:
- เพียงชื่อเดียว <Filter> แอตทริบิวต์ขององค์ประกอบ ID กำหนดตัวกรอง
- <FeGaussianBlur> องค์ประกอบที่กำหนดเบลอ
- ใน = "SourceGraphic" ส่วนนี้กำหนดผลกระทบที่สร้างขึ้นโดยภาพทั้งหมด
- stdDeviation แอตทริบิวต์กำหนดปริมาณของเบลอ
- กรองคุณสมบัติ <RECT> องค์ประกอบที่จะใช้ในการเชื่อมโยงองค์ประกอบที่จะ "F1" ตัวกรอง