SVG 模糊效果

<defs> ແລະ <filter>

ທຸກສິ່ງຟີຣເຕີ້ SVG ທີ່ <defs> ໃນປະກອບອາກາດ.<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>

ທ້າທາຍຢ່າງຕົວເອງ

ການອະທິບາຍວຽກງານ:

  • ທີ່ປະກອບອາກາດ <filter> ກຳນົດຊື່ອັນສະນະທີ່ລະອຽດຂອງສິ່ງຟີຣເຕີ້
  • <feGaussianBlur> ປະກອບອາກາດກຳນົດຜົນກະທົບລຸ່ມ
  • in="SourceGraphic" ສະແດງວ່າຜົນກະທົບທັງໝົດຂອງປະກອບອາກາດ
  • stdDeviation 属性定义模糊量
  • 元素的 filter 属性将该元素链接到 "f1" 滤镜