ล่าสุดการพัฒนาเว็บบทเรียน
 

SVGเงา

❮ก่อนหน้า ถัดไปบท❯

<defs> และ <Filter>

ฟิลเตอร์ SVG ทั้งหมดจะถูกกำหนดไว้ภายใน <defs> องค์ประกอบ <defs> องค์ประกอบสั้นสำหรับคำจำกัดความและมีความหมายขององค์ประกอบพิเศษ (such as filters)

<filter> องค์ประกอบที่จะใช้ในการกำหนดตัวกรอง SVG <filter> องค์ประกอบมีแอตทริบิวต์ ID ที่จำเป็นซึ่งระบุตัวกรอง กราฟิกแล้วชี้ไปที่ตัวกรองที่จะใช้

SVG <feOffset>

ตัวอย่างที่ 1

<feOffset> องค์ประกอบที่จะใช้ในการสร้างผลกระทบ Drop Shadow ความคิดที่จะใช้กราฟิก SVG (image or element) และย้ายไปนิด ๆ หน่อย ๆ ในระนาบ xy

ตัวอย่างแรกชดเชยสี่เหลี่ยมผืนผ้า (with <feOffset>) แล้วผสมผสานเดิมด้านบนของภาพชดเชย (with <feBlend>) :

feoffset

นี่คือรหัส 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>
ลองตัวเอง»

Code explanation:

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

ตัวอย่างที่ 2

ตอนนี้ภาพชดเชยสามารถเบลอ (with <feGaussianBlur>) :

feoffset2

นี่คือรหัส 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>
ลองตัวเอง»

Code explanation:

  • stdDeviation แอตทริบิวต์ของ <feGaussianBlur> องค์ประกอบที่กำหนดจำนวนเงินของการเบลอที่

ตัวอย่างที่ 3

ตอนนี้ทำให้เงาสีดำ:

feoffset3

นี่คือรหัส 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>
ลองตัวเอง»

Code explanation:

  • in แอตทริบิวต์ของ <feOffset> องค์ประกอบที่จะถูกเปลี่ยนเป็น "SourceAlpha" ซึ่งใช้ช่องอัลฟาเบลอแทนพิกเซล RGBA ทั้งหมด

ตัวอย่างที่ 4

ตอนนี้รักษาเงาเป็นสี:

feoffset4

นี่คือรหัส 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>
ลองตัวเอง»

Code explanation:

  • <feColorMatrix> กรองจะใช้ในการเปลี่ยนสีในภาพชดเชยใกล้ชิดกับสีดำ สามค่าของ '0.2' ในเมทริกซ์ทุกคนได้รับคูณด้วยช่องสีแดง, สีเขียวและสีฟ้า การลดค่าของพวกเขานำสีที่ใกล้เคียงกับสีดำ (black is 0)

❮ก่อนหน้า ถัดไปบท❯