เอฟเฟคต์กราดเท้าตรงของ SVG

<defs> และ <filter>

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

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

SVG <feOffset>

ตัวอย่าง 1

<feOffset> องค์ประกอบมีความหมายเพื่อสร้างภาพเงา คือ: ก่อนหน้านี้ได้รับ SVG กราฟิก (รูปภาพหรือองค์ประกอบ) แล้วเคลื่อนมันเล็กน้อยในแนว xy。

ตัวอย่างแรกเคลื่อนตัวตรงกลุ่มตัวทรงหก (ใช้ <feOffset>），และเสริมรูปภาพต้นแบบขึ้นบนรูปภาพที่มีการเคลื่อนตัว (ใช้ <feBlend>）：

นี่คือรหัส SVG ของคุณ:

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

ลองด้วยตัวเอง

การอธิบายรหัส

• องค์ประกอบ <filter> ขององค์ประกอบ id กำหนดชื่อเด่นของกรอบเงา
• <rect> ขององค์ประกอบ filter มีความหมายว่าเชื่อมโยงองค์ประกอบนี้ไปยังกรอบเงา "f1"

ตัวอย่าง 2

ตอนนี้ สามารถเข้าใจรูปภาพที่มีการทำเงาออกมาแล้ว (ใช้ <feGaussianBlur>）：

นี่คือรหัส SVG ของคุณ:

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

ลองด้วยตัวเอง

การอธิบายรหัส

• 属性 stdDeviation ขององค์ประกอบ <feGaussianBlur> กำหนดปริมาณที่เรียบเรียบ

ตัวอย่าง 3

ตอนนี้ จัดการเงาเป็นสีดำ:

นี่คือรหัส SVG ของคุณ:

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

ลองด้วยตัวเอง

การอธิบายรหัส

• <feOffset> มีค่า in ที่เปลี่ยนเป็น "SourceAlpha" ซึ่งใช้ช่อง Alpha แทนช่อง RGBA ของพิกเซลทั้งหมดเพื่อทำการเงา

ตัวอย่าง 4

ตอนนี้ จัดการเงาให้เป็นสีหนึ่ง:

นี่คือรหัส SVG ของคุณ:

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

ลองด้วยตัวเอง

การอธิบายรหัส

• <feColorMatrix> ฟิลเตอร์ใช้เพื่อแปลงสีของภาพที่เพิ่มความห่างออกไปให้ใกล้เคียงด้วยดำ ค่า '0.2' สามค่าในแนวตารางนั้น มีค่าทั้งสามมีความเป็นสีแดง สีเขียว และสีสีน้ำเงิน ค่าของเขาครึ่งตัวจะทำให้สีใกล้เคียงด้วยดำ (ดำคือ 0)