دليل SVG

عناصر SVG

ظلال SVG

في SVG، لعرض تأثير الظل، يتم استخدام عنصر <feOffset>. لتحقيق تأثير الظل، نأخذ رسم SVG ونقوم بتحريكه قليلاً في المستوى xy، Internet Explorer وSafari لا يدعمون مرشحات SVG!

مثال عبر الإنترنت

تحقيق تأثير الظل الأرجواني في الأسفل:

مثال

<svg height="250" width="250">
　　<defs>
　　　　<filter id="p1" x="0" y="0" width="200%" height="200%">
　　　　　　<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
　　　　　　<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"></feGaussianBlur>
　　　　　　<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
　　　　</filter>
　　</defs>
　　<rect width="90" height="90" stroke="blue" stroke-width="3" fill="purple" filter="url(#p1)" />
　　</svg>

اختبار لـ ‹/›

ملاحظة: Internet Explorer 9 وكل الإصدارات الأقدم لا تدعم مرشحات SVG.

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

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

تعريف خاصية id في <filter> يحدد الاسم الفريد للنمط.
استخدام خاصية filter للـ <rect> لربط العنصر بـ "p1" مبدئيًا.

صنع ظل أسود

مثال

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
　　<defs>
　　　　<filter id="f1" x="0" y="0" width="200%" height="200%">
　　　　　　<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
　　　　　　<feGaussianBlur　result="blurOut"　in="offOut"　stdDeviation="10"　/>
　　　　　　<feBlend　in="SourceGraphic"　in2="blurOut"　mode="normal"　/>
　　　　</filter>
　　</defs>
　　<rect　width="90"　height="90"　stroke="green"　stroke-width="3"　fill="yellow"　filter="url(#f1)"　/>
</svg>

اختبار لمعرفة ‹/›

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

ملاحظة: Internet Explorer 9 وكل الإصدارات الأقدم لا تدعم مرشحات SVG.

مثال شامل لـ SVG أثر الغموض في SVG