ปรากฏการณ์ที่เหมือนฝันใน SVG

<defs> และ <filter>

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

<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> กำหนดชื่อโฟลเตอร์ที่เด่นที่สุด
• <feGaussianBlur> องค์ประกอบกำหนดเอฟเฟกต์ที่เป็นเอฟเฟกต์ของการของมัน
• in="SourceGraphic" กำหนดให้เป็นผลที่สร้างขึ้นโดยสามารถเพิ่มเติมได้ทั้งหมดขององค์ประกอบ
• คุณสมบัติ stdDeviation กำหนดปริมาณที่มีความเบาะแทง
• คุณสมบัติ filter ขององค์ประกอบ <rect> จะเชื่อมโยงองค์ประกอบนี้กับตัวแทนเฟิลเตอร์ "f1"