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</text>

</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</text>

ਉਦਾਹਰਣ 3

ਇੱਕ ਦੌਰਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ ਅਤੇ ਇਸ ਦੇ ਅੰਦਰ ਲਿਖਤ ਜੋੜੋ ਇਹ ਪ੍ਰਮਾਣੂ ਰੰਗ ਵਿਭਜਨ ਵਾਲਾ ਹੈ:

SVG

ਇਹ 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

SVG</text>

</svg>

  • ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ