تأثيرات SVG الضبابية
<defs> و <filter>
يتم تحديد جميع مرشحات الإنترنت SVG ضمن عنصر <defs>. عنصر <defs> هو اختصار للتعريفات ويحتوي على تعريف للعناصر الخاصة (مثل المرشحات).
يُستخدم عنصر <filter> لتعريف مرشح SVG. يحتوي عنصر <filter> على سمة معرف مطلوبة تحدد عامل التصفية. ثم يشير الرسم إلى المرشح المراد استخدامه.
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>
شرح الكود:
- تحدد سمة المعرف لعنصر <filter> اسمًا فريدًا للمرشح
- يتم تحديد تأثير التمويه باستخدام عنصر <feGaussianBlur>
- يحدد جزء in = "SourceGraphic" أن التأثير يتم إنشاؤه للعنصر بأكمله
- تحدد السمة stdDeviation مقدار التمويه
- تربط سمة التصفية للعنصر <rect> العنصر بفلتر "f1"