أثر الغموض 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> تأثير البحث
• تعريف "SourceGraphic" يخلق تأثير لكل عنصر
• تعريف خاصية stdDeviation كمية الغموض
• يربط خاصية filter لـ <rect> العنصر إلى مرشح "f1"