ایس وی جی لائن گریدینٹ

<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>

خود شخصی طور پر کوشش کریں

کد تفسیر:

• <filter> عناصر کی id خاصیت فیلتر کا منفرد نام تعین کرتی ہے
• <rect> عناصر کی filter خاصیت اس عنصر کو "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" میں تبدیل کیا گیا ہے، جو پورا 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)