SVG ການສະຫຼາຍສາຍສະເຫຼີມ

<defs> ແລະ <filter>

ທັງໝົດ SVG ປະເພດຕົວປະກອບຕັ້ງໃນ <defs> ທີ່ປະກອບຕົວປະກອບ.<defs> ທີ່ປະກອບຕົວປະກອບ.

<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>

ທ່ານສຸດຕິດຕັ້ງພວກເຂົາເອງ

ການອະທິບາຍວິສະວະກອນ

• id ທີ່ ປະກອບຕົວປະກອບ <filter> ອາດປະກອບຄວາມອັນສະນະທີ່ບັນດານນະພາບ
• <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>

ທ່ານສຸດຕິດຕັ້ງພວກເຂົາເອງ

ການອະທິບາຍວິສະວະກອນ

• ປະກອບຕົວປະກອບ <feGaussianBlur> ທີ່ stdDeviation ອາດປະກອບຄວາມບວມ

ບົດຕະນາງ 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>

ທ່ານສຸດຕິດຕັ້ງພວກເຂົາເອງ

ການອະທິບາຍວິສະວະກອນ

• filterMatrix ສະແດງຕົວເພື່ອປ່ຽນສີຂອງບາຣີງກະພິບເປັນເບື້ອງທີ່ໃກ້ກັບສີດຳ. ທັງສາມຄັນທີ່ '0.2' ໃນສານສະແດງຈະກະພິບສີສີແດງ, ສີສີຂຽວແລະສີສີຣົດ. ການຫຼຸດຕົວຄັນນັ້ນຈະເຮັດໃຫ້ສີໃກ້ກັບສີດຳ(ສີດຳຈະຢູ່ທີ່ 0)