التدرج الخطي في SVG

<defs> و <filter>

جميع الفلاتر SVG في <defs> في العنصر.<defs> العنصر هو اختصار لـ (definitions)، يحتوي على تعريفات لخصائص خاصة (مثل الفلتر).

<filter> العنصر يُستخدم لتحديد فلتر SVG.<filter> العنصر يحتوي على خاصية id إلزامية، تستخدم لتحديد الفلتر. ثم سيعمل الشكل على الفلتر الذي سيتم استخدامه.

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>

جربها بنفسك

توضيح الكود:

• خاصية id لعنصر <filter> تعريف الاسم الفريد للفلتر
• <rect> خاصية الفلتر ترتبط بهذا العنصر إلى "f1" الفلتر

مثال 2

الآن، يمكنك تمرير صورة المبالغة في التوضيح (استخدام <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>

جربها بنفسك

توضيح الكود:

• <feGaussianBlur> عناصر خاصية stdDeviation تعريف مستوى الغموض

مثال 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>

جربها بنفسك

توضيح الكود:

• <feOffset> عامل in يتم تغييره إلى "SourceAlpha"، مما يستخدم قناة Alpha بدلاً من كل جزيء RGBA للتباين

مثال 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>

جربها بنفسك

توضيح الكود:

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