SVG Drop Shadows

❮ سابق التالي ❯

<defs> و <filter>

يتم تحديد جميع مرشحات SVG ضمن عنصر <defs>. عنصر <defs> هو اختصار للتعريفات ويحتوي على تعريف للعناصر الخاصة (مثل المرشحات).

يُستخدم عنصر <filter> لتعريف مرشح SVG. يحتوي عنصر <filter> على سمة معرف مطلوبة تحدد عامل التصفية. ثم يشير الرسم إلى المرشح المراد استخدامه.

SVG <feOffset>

مثال 1

يُستخدم عنصر <feOffset> لإنشاء تأثيرات الظل المسقط. تكمن الفكرة في التقاط رسم SVG (صورة أو عنصر) وتحريكه قليلاً في المستوى xy.

يزيح المثال الأول مستطيلاً (مع <feOffset>) ، ثم يمزج الأصل أعلى صورة الإزاحة (مع <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>

شرح الكود:

تحدد سمة المعرف لعنصر <filter> اسمًا فريدًا للمرشح
تربط سمة التصفية للعنصر <rect> العنصر بفلتر "f1"

مثال 2

الآن ، يمكن تشويش صورة الإزاحة (باستخدام <feGaussianBlur>):

feoffset2

هذا هو رمز 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>

شرح الكود:

تحدد خاصية الانحراف المعياري لعنصر <feGaussianBlur> مقدار التمويه

مثال 3

الآن ، اجعل الظل أسود:

feoffset3

هذا هو رمز 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>

شرح الكود:

يتم تغيير السمة في عنصر <feOffset> إلى "SourceAlpha" التي تستخدم قناة Alpha للتمويه بدلاً من بكسل RGBA بالكامل

مثال 4

الآن ، تعامل مع الظل كلون:

feoffset4

هذا هو رمز 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>

شرح الكود:

يستخدم مرشح <feColorMatrix> لتحويل الألوان في صورة الإزاحة أقرب إلى الأسود. يتم ضرب القيم الثلاث لـ "0.2" في المصفوفة في القنوات الحمراء والخضراء والزرقاء. يؤدي تقليل قيمها إلى تقريب الألوان من الأسود (الأسود يساوي 0)

❮ سابق التالي ❯