Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

SVG xiralashtirish effektlari

ULASHISH

SVG <feGaussianBlur>

<feGaussianBlur> filtri xiralashtirish effektlarini yaratish uchun ishlatiladi:

Sorry, your browser does not support inline SVG.

SVG kodi quyidagicha:

Misol

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">   <defs>     <filter id="f1" x="0" y="0" xmlns="http://www.w3.org/2000/svg">       <feGaussianBlur in="SourceGraphic" stdDeviation="15" />     </filter>   </defs>   <rect width="90" height="90" fill="yellow" filter="url(#f1)" /> </svg>
O‘zingiz sinab ko‘ring »

Kod izohi:

  • <filter> elementining id atributi filtr uchun yagona nom belgilaydi
  • Xiralashtirish effekti <feGaussianBlur> elementi bilan belgilanadi
  • in="SourceGraphic" qismi effekt butun element uchun yaratilishini belgilaydi
  • stdDeviation atributi xiralashtirish miqdorini belgilaydi
  • <rect> elementining filter atributi elementni "f1" filtriga bog‘laydi

SVG <feGaussianBlur>

stdDeviation atributi xiralashtirish miqdorini belgilaydi. Qiymat qanchalik katta bo‘lsa, rasm shunchalik xira bo‘ladi:

Sorry, your browser does not support inline SVG.

SVG kodi quyidagicha:

Misol

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">   <defs>     <filter id="f2" x="0" y="0" xmlns="http://www.w3.org/2000/svg">       <feGaussianBlur in="SourceGraphic" stdDeviation="55" />     </filter>   </defs>   <rect width="90" height="90" fill="yellow" filter="url(#f2)" /> </svg>
O‘zingiz sinab ko‘ring »
‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish