SVG ਲਿਨੀਅਰ ਗਰੇਡੀਐਂਟ
- ਕੋਡ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ SVG ਸ਼ੇਡ ਪ੍ਰਭਾਵ
- <text> ਈਲੈਮੈਂਟ ਟੈਕਸਟ ਜੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ 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>
- <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)" />
ਉਦਾਹਰਣ 3
ਇੱਕ ਦੌਰਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ ਅਤੇ ਇਸ ਦੇ ਅੰਦਰ ਲਿਖਤ ਜੋੜੋ ਇਹ ਪ੍ਰਮਾਣੂ ਰੰਗ ਵਿਭਜਨ ਵਾਲਾ ਹੈ:
ਇਹ 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>
- ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ
- ਕੋਡ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ SVG ਸ਼ੇਡ ਪ੍ਰਭਾਵ
- <text> ਈਲੈਮੈਂਟ ਟੈਕਸਟ ਜੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ SVG ਰੈਡੀਅਲ ਗਰੇਡੀਐਂਟ