افکت Blur در SVG

<defs> و <filter>

تمام فیلترهای اینترنتی SVG در داخل یک عنصر <defs> تعریف می شوند. عنصر <defs> مخفف کلمه ی definitions است و عناصر خاص را تعریف می کند( مانند فیلترها). 

از عنصر <filter> برای تعریف یک فیلتر در SVG استفاده می شود. ضروری است که عنصر <filter> یک id داشته باشد تا این فیلتر مشخص شود. سپس بدین وسیله می توان گرافیک را به فیلتر متصل کرد. 

 <feGaussianBlur> در SVG

مثال 1

از عنصر <feGaussianBlur> برای ایجاد افکت های blur استفاده می شود: 

کد SVG مورد نظر در زیر قرار دارد:

توضیح کد بالا:

• خصوصیت id از عنصر <filter> یک نام یکتا را برای فیلتر مورد نظر مشخص می کند. 
• افکت blur به وسیله ی عنصر <feGaussianBlur> تعریف شده است. 
• عبارت "in="SourceGraphic تعریف می کند که افکت مورد نظر برای تمامی عنصر هدف تعیین شده است. 
• خصوصیت stdDeviation مقدار blur را مشخص می کند. 
• خصوصیت filter که در عنصر <rect> قرار دارد، این عنصر را به فیلتر با آی دی f1 متصل می کند. 

• قبلی
• بعدی