ฟิลเตอร์ความคล้ายคลึงกันของ SVG

ต้องมีการกำหนดฟิลเตอร์ของ SVG ในแท็กซ์ <defs> ของเอกสาร

มุมมองความคล้ายคลึงกัน (Gaussian Blur)

แท็กซ์ <filter> ใช้เพื่อกำหนดฟิลเตอร์ของ SVG แท็กซ์ <filter> ใช้คุณสมบัติ id ใดๆ ที่จำเป็นเพื่อกำหนดฟิลเตอร์ที่จะนำมาใช้กับกราฟิก?

แท็กซ์ <filter> ต้องมีการวงล้อมด้วยแท็กซ์ <defs> แท็กซ์ <defs> คือสั้นแทนของ definitions ซึ่งอนุญาตให้มีการกำหนดองค์ประกอบพิเศษเช่นฟิลเตอร์

โปรดคัดลอกรหัสใต้นี้และบันทึกไฟล์เป็น "filter1.svg" แล้วบันทึกไฟล์ที่ลงเครื่องหลักของคุณ:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

การอธิบายรหัสคำสั่ง:

  • คุณสมบัติ id ของแท็กซ์ <filter> สามารถกำหนดชื่อที่เด่นที่สำหรับฟิลเตอร์ (ฟิลเตอร์นี้สามารถถูกใช้โดยหลายองค์ประกอบในเอกสาร)
  • คุณสมบัติ filter:url ใช้เพื่อเชื่อมโยงองค์ประกอบเล่มถึงฟิลเตอร์ ตอนเชื่อมโยง id ฟิลเตอร์ ต้องใช้สัญญาณ #
  • ปรากฏผลของฟิลเตอร์สามารถกำหนดได้โดยแท็กซ์ <feGaussianBlur> โดยนำมาใช้หลังแท็กซ์ fe สำหรับฟิลเตอร์ทุกชนิด
  • คุณสมบัติ stdDeviation ของแท็กซ์ <feGaussianBlur> สามารถกำหนดระดับที่เร็วของการเรียบเรียง
  • ส่วน in="SourceGraphic" นี้กำหนดว่าทำไม่ให้มีปรากฏผลจากภาพรวมทั้งหมด

ดูตัวอย่าง

ตัวอย่างเช่น อื่น ๆ ที่มีค่า stdDeviation ต่างกัน

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

ดูตัวอย่าง