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

SVG ਰੰਗ ਬਦਲਾਅ <defs> ਟੈਗ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਕੀਤੇ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ。

SVG ਰੰਗ ਬਦਲਾਅ

ਰੰਗ ਬਦਲਾਅ ਇੱਕ ਰੰਗ ਤੋਂ ਦੂਜੇ ਰੰਗ ਦਾ ਸਮੁੱਚਾ ਤਬਦੀਲ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਕਈ ਰੰਗਾਂ ਦੇ ਤਬਦੀਲ ਨੂੰ ਇੱਕ ਹੀ ਅੰਗ ਉੱਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

SVG ਵਿੱਚ ਦੋ ਪ੍ਰਮੁੱਖ ਰੰਗ ਬਦਲਾਅ ਪ੍ਰਕਾਰ ਹਨ:

  • ਸਿਧਾਰਨ ਰੰਗ ਬਦਲਾਅ
  • ਰੇਡੀਅਸ ਰੰਗ ਬਦਲਾਅ

ਸਿਧਾਰਨ ਰੰਗ ਬਦਲਾਅ

<linearGradient> ਟੈਗ ਨੂੰ SVG ਦੇ ਸਿਧਾਰਨ ਰੰਗ ਬਦਲਾਅ ਨਿਰਧਾਰਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ。

<linearGradient> ਟੈਗ ਨੂੰ <defs> ਦੇ ਅੰਦਰ ਜਮ੍ਹਾਂ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। <defs> ਟੈਗ definitions ਦਾ ਸ਼ਾਬਦਿਕ ਅਰਥ ਹੈ, ਇਹ ਵਿਸ਼ੇਸ਼ ਅੰਗਾਂ, ਜਿਵੇਂ ਕਿ ਰੰਗ ਬਦਲਾਅ ਆਦਿ ਦੀ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

ਸਿਧਾਰਨ ਰੰਗ ਬਦਲਾਅ ਪੱਧਰੀ, ਸਿਆਹੀ ਜਾਂ ਕੋਨੇ ਵਾਲਾ ਰੰਗ ਬਦਲਾਅ ਵਜੋਂ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ:

  • ਜਦੋਂ y1 ਅਤੇ y2 ਇੱਕ ਹੋਣ, ਅਤੇ x1 ਅਤੇ x2 ਅਲੱਗ ਹੋਣ ਤਾਂ ਪੱਧਰੀ ਰੰਗ ਬਦਲਾਅ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ
  • ਜਦੋਂ x1 ਅਤੇ x2 ਇੱਕ ਹੋਣ, ਅਤੇ y1 ਅਤੇ y2 ਅਲੱਗ ਹੋਣ ਤਾਂ ਸਿਆਹੀ ਰੰਗ ਬਦਲਾਅ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ
  • ਜਦੋਂ x1 ਅਤੇ x2 ਅਲੱਗ ਹੋਣ, ਅਤੇ y1 ਅਤੇ y2 ਅਲੱਗ ਹੋਣ ਤਾਂ ਕੋਨੇ ਵਾਲਾ ਰੰਗ ਬਦਲਾਅ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ

ਹੇਠ ਲਿਖੇ ਕੋਡ ਨੂੰ ਨੋਟਬੁੱਕ ਵਿੱਚ ਕਾਪੀ ਕਰੋ, ਫਿਰ ਫਾਇਲ ਨੂੰ "linear1.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">


<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">

ਕੋਡ ਵਿਸਥਾਰਣਃ

  • <linearGradient> ਟੈਗ ਦੇ id ਪ੍ਰਤੀਯੋਗਿਤਾ ਪ੍ਰਤੀਯੋਗਿਤਾ ਰੰਗ ਬਦਲਾਅ ਨੂੰ ਇੱਕ ਅਲੱਗ ਨਾਮ ਨਾਲ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕਦਾ ਹੈ
  • fill:url(#orange_red) ਪ੍ਰਤੀਯੋਗਿਤਾ ਪਰਿਵਾਰੀ ਅੰਗ ellipse ਨੂੰ ਇਸ ਰੰਗ ਬਦਲਾਅ ਨਾਲ ਜੋੜਦਾ ਹੈ
  • <linearGradient> ਟੈਗ ਦੇ x1, x2, y1, y2 ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਰੰਗ ਬਦਲਾਅ ਦੀ ਸ਼ੁਰੂਆਤ ਅਤੇ ਸਮਾਪਤ ਸਥਾਨ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕਦੇ ਹਨ
  • ਰੰਗ ਬਦਲਾਅ ਦਾ ਦਾਇਰਾ ਦੋ ਜਾਂ ਵੱਧ ਰੰਗਾਂ ਤੋਂ ਬਣਿਆ ਹੋ ਸਕਦਾ ਹੈ। ਹਰ ਰੰਗ ਨੂੰ ਇੱਕ <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">

查看例子 （垂直渐变）