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

SVG ਗੇਰੀਸ਼ਮ <defs> ਟੈਗ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਕੀਤੇ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ。

ਰੇਡੀਅਲ ਗੇਰੀਸ਼ਮ

<radialGradient> ਰੇਡੀਅਲ ਗੇਰੀਸ਼ਮ ਨਿਰਧਾਰਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

<radialGradient> ਟੈਗ ਨੂੰ <defs> ਵਿੱਚ ਨਾਮਜ਼ਦ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ。<defs> ਟੈਗ ਹੈ definitions ਦਾ ਛੋਟਾ ਰੂਪ, ਜਿਸ ਨਾਲ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਗੇਰੀਸ਼ਮ ਜਿਹੇ ਤੱਤਾਂ ਦੀ ਨਿਰਧਾਰਣ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ。

ਹੇਠ ਲਿਖੇ ਕੋਡ ਨੂੰ ਨੋਟਬੁੱਕ ਵਿੱਚ ਕਾਪੀ ਕਰੋ, ਫਿਰ ਫਾਇਲ ਨੂੰ "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) ਪ੍ਰਤੀਯੋਗਿਤਾ ਰੰਗ ਨੂੰ ਇਸ ਗੇਰੀਸ਼ਮ ਨਾਲ ਜੋੜਦਾ ਹੈ, 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>

مثال دیکھو