أثر الحجب لـ SVG

يستخدم SVG العنصر <feGaussianBlur> لإظهار تأثير البحث.滤镜 <feGaussianBlur> يقوم بتصفية الصورة المدخلة بشكل غاوسي، لا يدعم متصفح Internet Explorer 9 وأحدث إصداراته تصفية SVG.

<svg　height="250"　width="250">
　　<defs>
　　　　<filter　id="p1"　x="0"　y="0">
　　　　　　<feGaussianBlur　in="SourceGraphic"　stdDeviation="15"　/>
　　　　</filter>
　　</defs>
　　<rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)" />
</svg>

النتيجة التي تنتج بعد التشغيل كالتالي:

توضيح الاستخدام

• تعريف خاصية id لعنصر <filter> يحدد الاسم الفريد للنمط.

• يستخدم عنصر <feGaussianBlur> لتحديد تأثير الحجب.

• يستخدم جزء in = "SourceGraphic" لعنصر <feGaussianBlur> لتحديد تأثير يُطبق على العنصر كله.

• يستخدم خاصية stdDeviation لتحديد كمية الحجب.

• خصائص filter لعنصر <rect> تستخدم لربط العنصر إلى مصفى "p1".