الغموض المعياري SVG

يجب تعريف مرشحات SVG داخل علامة <defs>

الغموض المعياري (Gaussian Blur)

تستخدم علامة <filter> لتعريف مرشحات SVG. كيف يمكن استخدام خاصية id في علامة <filter> لتعريف المرشح الذي سيتم تطبيقه على الرسومات؟

يجب أن تكون علامة <filter> مدمجة داخل علامة <defs>. <defs> هي اختصار لـ definitions، وتسمح بتعريف العناصر الخاصة مثل المرشحات

يرجى نسخ الكود التالي إلى ملف النص، ثم حفظ الملف باسم "filter1.svg". أضف هذا الملف إلى مجلد الويب الخاص بك:

?xml version="1.0" standalone="no"?
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

توضيح الكود:

  • يمكن استخدام خاصية id في علامة <filter> لتعريف اسم فريد للمرشح (يمكن استخدام نفس المرشح من قبل عدة عناصر في الوثيقة)
  • يستخدم خاصية filter:url لربط العنصر بالمرشح. عند ربط مرشح id، يجب استخدام رمز #
  • تحدد تأثيرات المرشح من خلال علامة <feGaussianBlur>. يمكن استخدام اسم fe كنهاية للمرشحات
  • يمكن استخدام خاصية stdDeviation في علامة <feGaussianBlur> لتحديد درجة الغموض
  • يحدد الجزء in="SourceGraphic" تأثير الإفتراض من قبل الصورة بأكملها

عرض المثال

مثال آخر لـ stdDeviation مختلفة

?xml version="1.0" standalone="no"?
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

عرض المثال