<defs> و <مرشح>
يتم تعريف جميع المرشحات SVG ضمن <defs> العنصر. و <defs> العنصر قصيرة للحصول على تعريفات ويحتوي على تعريف العناصر الخاصة (such as filters) .
و <filter> عنصر يستخدم لتحديد مرشح SVG. و <filter> عنصر له سمة معرف المطلوبة التي تحدد التصفية. ثم يشير الرسم إلى مرشح للاستخدام.
SVG <feOffset>
مثال 1
و <feOffset> يستخدم عنصر لخلق تأثيرات شبح الهبوط. والفكرة هي أن تأخذ رسم SVG (image or element) وتحريكه قليلا في الطائرة س ص.
إزاحة المثال الأول مستطيل (with <feOffset>) ، ثم تمزج الأصلي في أعلى الصورة تعويض (with <feBlend>) :
هنا هو رمز SVG:
مثال
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20"
dy="20" />
<feBlend in="SourceGraphic" in2="offOut"
mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
انها محاولة لنفسك » Code explanation:
- و id سمة من <filter> عنصر يحدد اسما فريدا لمرشح
- و filter سمة من <rect> عنصر تربط عنصر إلى "f1" فلتر
مثال 2
الآن، يمكن أن تكون واضحة في صورة تعويض (with <feGaussianBlur>) :
هنا هو رمز SVG:
مثال
<svg height="140" width="140">
<defs>
<filter id="f2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" 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(#f2)" />
</svg>
انها محاولة لنفسك » Code explanation:
- و stdDeviation سمة من <feGaussianBlur> عنصر تحدد مبلغ طمس
مثال 3
الآن، وجعل الأسود الظل:
هنا هو رمز SVG:
مثال
<svg height="140" width="140">
<defs>
<filter id="f3" 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(#f3)" />
</svg>
انها محاولة لنفسك » Code explanation:
- و in سمة من <feOffset> عنصر يتم تغيير إلى "SourceAlpha" الذي يستخدم قناة ألفا لطمس بدلا من بكسل رغبا كامل
مثال 4
الآن، علاج الظل كلون:
هنا هو رمز SVG:
مثال
<svg height="140" width="140">
<defs>
<filter id="f4" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20"
dy="20" />
<feColorMatrix result="matrixOut" in="offOut"
type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0
1 0" />
<feGaussianBlur result="blurOut" in="matrixOut"
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(#f4)" />
</svg>
انها محاولة لنفسك » Code explanation:
- و <feColorMatrix> يستخدم فلتر لتحويل الألوان في صورة تعويض أقرب إلى الأسود. الحصول على ضرب القيم الثلاث من "0.2" في المصفوفة كل من قنوات الأحمر والأخضر والأزرق. الحد قيمهم يجلب الألوان أقرب إلى الأسود (black is 0)