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

SVG径ی گرینڈ - <radialGradient>

<radialGradient> عنصر،径ی گرینڈ (radiant gradient) کا تعین کرتا ہے

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

مثال 1

ایک دائرہ چکر بناکر، جس میں سفید سے نیلا کا径ی گرینڈ بھرنا ہے:

یہ SVG کد ہے:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

آپ خود بچارو

کد تفسیر:

• <radialGradient> کا id حصہ، گرینڈ کا منفرد نام کا تعین کرتا ہے
• cx، cy اور r کا حصہ، سب سے باہری دائرہ کا تعین کرتا ہے، fx اور fy، سب سے اندرونی دائرہ کا تعین کرتا ہے
• گرینڈ کا رنگ کا دائرہ، دو یا کثیر سے رنگوں کا مجموعہ کا تعین کرتا ہے۔ ہر رنگ کو <stop> مارکر کا تعین کیا جاتا ہے
• offset کا حصہ، گرینڈ رنگ کی شروعات اور ختم کی جگہ کا تعین کرتا ہے
• fill کا حصہ، دائرہ چکر عناصر کو گرینڈ سے جوڑتا ہے

مثال 2

ایک دوسرا دائرہ چکر بناکر، جس میں سفید سے نیلا کا径ی گرینڈ بھرنا ہے:

یہ SVG کد ہے:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

آپ خود بچارو