مستقیم SVG

SVG گرادیئن

گرادیئن ایک رنگ سے دوسرے رنگ تک کا سخت تبدیلی ہے۔ مزید برآمد، ایک عنصر میں متعدد رنگ کی تبدیلی کا استعمال بھی کیا جاسکتا ہے。

SVG میں دو اہم گرادیئن کی نوعیت موجود ہیں:

• افقی گرادیئن
• شعاعی گرادیئن

SVG افقی گرادیئن - <linearGradient>

<linearGradient> عنصر افقی گرادیئن کا تعریف کرنا ہوتا ہے。

<linearGradient> عنصر ضرورتاً اندر نکالنے چاہئیے <defs> کے اندر<defs> عنصر تعریف (definitions) کا مختصر نام ہے، جس میں خصوصی عنصر (مثلاً فیلٹر) کی تعریف شامل ہوتی ہے。

线性渐变可以定义为水平、垂直或角度渐变：

• جب y1 اور y2 مساوی ہوتے ہیں اور x1 اور x2 غیر مساوی ہوتے ہیں تو افقی گرادیئن بنایا جاتا ہے
• جب x1 اور x2 مساوی ہوتے ہیں اور y1 اور y2 غیر مساوی ہوتے ہیں تو عمودی گرادیئن بنایا جاتا ہے
• جب x1 اور x2 مختلف ہوتے ہیں اور y1 اور y2 غیر مساوی ہوتے ہیں تو زاویاتی گرادیئن بنایا جاتا ہے

مثال 1

ایک دائرہ تعریف کیا گیا ہے، جس میں صاف سورج سے لیلو رنگ کا افقی سائیزی گرادیئن موجود ہے:

یہ SVG کد ہے:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

آزمایش کنید

توضیح کد:

• <linearGradient> کا حصہ id کا حصہ گریڈینٹ کا نام کا تعریف کرتا ہے
• <linearGradient> کا حصہ x1، x2، y1، y2 کا حصہ گریڈینٹ کی شروعات اور ختم کرنے کا کام کرتا ہے
• گریڈینٹ کا رنگ دائرہ کا رینج دو یا کثیر سے رنگوں کا مشتق ہوتا ہے۔ ہر رنگ کو <stop> کا نشان دہ کرتا ہے
• offset کا حصہ گریڈینٹ رنگ کی شروعات اور ختم کرنے کا کام کرتا ہے
• fill کا حصہ دائرہ چکر عناصر کو گریڈینٹ سے جوڑتا ہے

مثال 2

ایک دائرہ چکر کا تعریف کرتا ہے، جس میں زرد سے لال کا عمودی سائیکل گریڈینٹ موجود ہے:

یہ SVG کد ہے:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

آزمایش کنید

مثال 3

ایک دائرہ چکر کا تعریف کرتا ہے، جس میں متنی اضافہ کیا گیا ہے، جس میں زرد سے لال کا افقی سائیکل گریڈینٹ موجود ہے:

یہ SVG کد ہے:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

آزمایش کنید

توضیح کد:

• عنصر <text> برای اضافه کردن متن استفاده می‌شود