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

<defs> اور <filter>

تعریف میں <defs> تمام SVG فیلتر<defs> علامت میں تعریف کی جاتی ہے。

علامت استعمال کی جاتی ہے جس میں SVG فیلتر دینا ہوتا ہے。 علامت کا استعمال کیا جاتی ہے جس میں definitions کا معنی دینا ہوتا ہے، جس میں خاص علامات (جیسے فیلتر) کا تعریف کیا جاتا ہے。علامت استعمال کی جاتی ہے جس میں SVG فیلتر دینا ہوتا ہے。 <filter>

SVG <feOffset> علامت کا ایک ضروری id属性 ہوتا ہے، جس کا استعمال فیلتر کی شناخت کے لئے کیا جاتا ہے، پھر گرافک کا استعمال کیا جاتا ہے جو اس فیلتر کا استعمال کرنا چاہئیے。

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਕੋਡ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ:

• 元素的 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 ਹੈ)