تأثیرات محو SVG

<defs> و <filter>

تمام فیلترهای SVG در <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>

آزمایش کنید

توضیح کد:

• مشخصات id عنصر <filter> نام منحصر به فرد فیلتر را تعریف می‌کند
• عنصر <feGaussianBlur> به معنای ایجاد اثر تار است
• تعریف in="SourceGraphic" به معنای ایجاد اثر برای کل عنصر است
• خصوصیات stdDeviation مقدار محو را تعریف می‌کند
• خصوصیات filter عناصر <rect> این عنصر را به فیلتر "f1" متصل می‌کند