SVG Gaussian Blur

ຕ້ອງກໍານົດ SVG ເຊິ່ງພິດຕະພາງໃນ <defs>.

ການລຶບຄວາມຫຼາຍຢ່າງ Gaussian

ປະສານ <filter> ສະເໜີຄວາມຄິດຂອງ SVG ເຊິ່ງສະເໜີຄວາມຄິດທີ່ຈະນຳໃຊ້ສຳລັບຮູບພາບ?

ປະສານ <filter> ຕ້ອງຢູ່ພາຍໃນ <defs> ສະເໜີ. <defs> ແມ່ນຫົວຂໍ້ຂອງ definitions, ທີ່ສາມາດກໍານົດສິ່ງພິດຕະພາງທີ່ຫຼາຍຢ່າງ

ກະລຸນາສິ້ນສົ່ງວິທິພາຍໃຕ້ບູບເອກະສານ, ແລະບັນທຶກເປັນ "filter1.svg". ບັນຈຸບັນບຸກຄົນທີ່ຢູ່ໃນສາຍເວັບ:

?xml version="1.0" standalone="no"?
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

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

  • ປະສານ id ຂອງ <filter> ສາມາດກໍານົດຊື່ອັນສະນະທີ່ມີຄວາມຫຼາຍຢ່າງ (ປະສານສິ່ງພິດຕະພາງສາມາດນຳໃຊ້ຈາກຫຼາຍສິ່ງໃນໂຕວັດຕະລາງ)
  • ປະສານ filter:url ສະເໜີຄວາມພັດທະນາຕົວເອງຂອງສິ່ງ. ເມື່ອທຽບບັນດາປະສານ id, ຕ້ອງນຳໃຊ້ #
  • ຜົນຜະລິດຂອງສິ່ງພິດຕະພາງແມ່ນດ້ວຍ <feGaussianBlur> ສະເໜີ. fe ສິນລະປະສານສາມາດນຳໃຊ້ສຳລັບສິ່ງພິດຕະພາງທັງໝົດ
  • ປະສານ stdDeviation ຂອງ <feGaussianBlur> ສາມາດກໍານົດຄວາມຫຼາຍຢ່າງຂອງການລຶບ
  • ຂອງ in="SourceGraphic" ສ່ວນນີ້ສະເໜີຄວາມຄິດຂອງຜົນຜະລິດຈາກຮູບພາບທັງໝົດ

ກວດສອບຄວາມຍິງ

ຄືນຄົບທີ່ມີຄວາມຫຼາຍຢ່າງ stdDeviation

?xml version="1.0" standalone="no"?
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

ກວດສອບຄວາມຍິງ