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

SVG گرادیئنٹ کو <defs> تگ میں تعریف کیا جانا چاہئے۔

رادیائی گرادیئنٹ

<radialGradient> تگ کا استعمال放射性 گرادیئنٹ کا تعریف کرنے کے لئے کیا جاتا ہے۔

<radialGradient> تگ کو <defs> میں نمودار کیا جانا چاہئے۔ <defs> تگ کا مطلب تعریف کیا جاتا ہے، یہ تگ خاص عناصر جیسے گرادیئنٹ وغیرہ کا تعریف کرنے کی اجازت دیتا ہے۔

ایک یادداشت میں اس کد کو کاپی کر کے اس کو "radial1.svg" کے نام سے فائل کا ذخیرہ کریں، اس فائل کو آپ کا ویب ڈائریکٹری میں رکھیں:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

کد توضیح:

<radialGradient> تگ کا id نمبر گرادیئنٹ کے لئے ایک منفرد نام مقرر کر سکتا ہے، fill:url(#grey_blue) نمبر اس گرادیئنٹ کو ellipse عناصر سے جوڑتا ہے، cx، cy اور r نمبروں سے باہر دائرہ، جبکہ fx اور fy نمبروں سے اندرون دائرہ رنگ کی رنگین کاری کا دائرہ یا کئی رنگوں کا ترکیب ہو سکتا ہے۔ ہر رنگ کو ایک <stop> تگ کے ذریعے مقرر کیا جاتا ہے۔ offset نمبر کا استعمال گرادیئنٹ کی شروعات اور خاتمہ کی مقررات کے لئے کیا جاتا ہے。

مثال دیکھیں

ایک مثال دیگہر:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

مثال دیکھیں