> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # पाथ पर SVG ग्रेडिएंट: मोड़ के आसपास रंग जाँचें > मुड़े रिबन पर SVG निर्देशांक ग्रेडिएंट और जानबूझकर बनाए रंग खंड तुलना करें। स्रोत जाँचें, दो आकार परखें और ज्यामिति का चुनाव तय करें। Source: https://perfectvector.com/hi/blog/svg-gradient-curved-stroke Language: hi Author: Irene Kim Published: 2026-10-05T08:00:00+09:00 Updated: 2026-10-05T08:00:00+09:00 साधारण SVG `linearGradient` मुड़े पाथ पर दूरी की प्रगति नहीं मापता। वह निर्देशांक तंत्र में ग्रेडिएंट वेक्टर के अनुसार पेंट करता है। रिबन वापस मुड़े तो उस वेक्टर पर समान स्थान वाले दो बिंदुओं को समान रंग मिल सकता है, भले वे रिबन के साथ बहुत दूर हों। स्थिर डिज़ाइन में मोड़ के साथ रंग आगे बढ़ना चाहिए तो अलग रंगीन खंड बना सकते हैं। इससे क्रम पर नियंत्रण मिलता है, लेकिन ज्यामिति और दिखाई देने वाली रंग सीमाएँ बढ़ती हैं। हमारा मूल उदाहरण उसी बनाए मार्ग पर क्षैतिज ग्रेडिएंट और आठ चुनी पट्टियाँ तुलना करता है। दोनों फ़ाइलों में पाथ हैं और एम्बेडेड चित्र नहीं। ## जाँचें कि रंग कहाँ दोहराता है [SVG2 paint-server विनिर्देश](https://www.w3.org/TR/SVG2/pservers.html) रैखिक ग्रेडिएंट को वेक्टर और उसके रंग स्टॉप से परिभाषित करता है। रेडियल ग्रेडिएंट उनकी अपनी वृत्ताकार ज्यामिति से बताता है। कोई परिभाषा मनमाने पाथ को पाथ-दूरी रंग अक्ष नहीं बनाती। हमारा रिबन ऊपर बाएँ शुरू होकर दाएँ जाता है, अर्धवृत्त पर मुड़ता है और नीचे बाएँ लौटता है। क्षैतिज ग्रेडिएंट बाईं दोनों छोरों को नारंगी और दाएँ मोड़ को बैंगनी करता है। वह वैध निर्देशांक ग्रेडिएंट है; बस “इस मार्ग की शुरुआत से अंत तक रंग बदलें” से अलग डिज़ाइन प्रश्न का उत्तर देता है। [MDN ग्रेडिएंट ट्यूटोरियल](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) अंतिम बिंदु और स्टॉप मॉडल समझाता है। अधिक स्टॉप जोड़ने से निर्देशांक-आधारित रंग क्रम बदलता है। पेंट वक्र का अनुसरण नहीं करने लगता। **निर्देशांक रंग और बनाए रंग खंड** ![लौटते मुड़े रिबन पर समान छोर रंगों और मोड़ के साथ आगे बढ़ते अलग रंगों वाले रिबन की वैचारिक तुलना](https://perfectvector.com/blog/svg-gradient-curved-stroke/coordinate-and-bands.webp) *चित्रण: निर्देशांक ग्रेडिएंट लौटते मार्ग पर रंग दोहरा सकता है, जबकि अलग पट्टियाँ शुरुआत से अंत तक अलग क्रम दे सकती हैं। नीचे की वास्तविक स्रोत गिनती और ब्राउज़र नमूने स्वतंत्र बनाए SVG से हैं।* ## एक साधारण ग्रेडिएंट नियंत्रण के रूप में रखें पूरी फ़ाइल `coordinate.svg` सहेजें। पाथ `200×160` viewBox के भीतर 24-इकाई स्ट्रोक लेता है। उसके सीधे हिस्से और दायाँ अर्धवृत्त एक संपादन योग्य केंद्ररेखा बनाते हैं। ```svg ``` हम स्रोत निर्देशांक तंत्र में ग्रेडिएंट छोर स्पष्ट करने के लिए `gradientUnits="userSpaceOnUse"` लेते हैं। बाउंडिंग-बॉक्स निर्देशांक करने से छोरों की अभिव्यक्ति बदलेगी; पाथ-दूरी पेंट नहीं आएगा। [gradientUnits संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) और हमारी [ग्रेडिएंट निर्देशांक गाइड](https://perfectvector.com/hi/blog/svg-gradient-units) देखें। पूरा मार्ग एक `path` एलिमेंट है। अधिक जटिल रंग प्रभाव देना तय करें तब भी इस सरल संस्करण को ज्यामिति मास्टर रखें। ## मोड़ के आसपास चरणबद्ध क्रम बनाएँ नीचे की सामग्री `bands.svg` सहेजें। वह ऊपर का सीधा हिस्सा दो टुकड़ों, अर्धवृत्त चार आर्क और लौटता सीधा हिस्सा दो टुकड़ों में बाँटती है। रंग मार्ग के क्रम में हैं, ऊपर की शुरुआत में नारंगी से नीचे अंत में बैंगनी तक। ```svg ``` ये असमान खंड लंबाइयों वाली हाथ से चुनी आठ पट्टियाँ हैं। पाथ लंबाई की हर इकाई पर समान रंग वृद्धि की गणना नहीं और सतत छायांकन भी नहीं बनातीं। आर्क के गोल किए दशमलव अंतिम बिंदु मूल मार्ग का अनुमान हैं; उदाहरण पिक्सेल-समान बाहरी रेखा का दावा नहीं करता। [`path` संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) एलिमेंट और उसके पाथ डेटा को बताता है। हर खंड यहाँ स्ट्रोक वाली केंद्ररेखा है, बाहरी रूपरेखा वाला बंद भरण नहीं। गंतव्य को बंद आकृतियाँ चाहिए तो इन स्ट्रोक टुकड़ों को कटिंग रूपरेखा मानने के बजाय ज्यामिति अलग तैयार और जाँचें। हम [`stroke-linecap="butt"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) लेते हैं ताकि सटे टुकड़े अपने अंतिम बिंदुओं से आगे न जाएँ। हर भीतरी खंड पर गोल कैप पड़ोसी रंग पर चढ़ेंगे। सीधे से आर्क के जोड़ में दिशा भी मिलनी चाहिए; हमारी [चिकने जोड़ गाइड](https://perfectvector.com/hi/blog/svg-bezier-smooth-joins) ज्यामितीय निरंतरता का प्रश्न अलग बताती है। ## दो आकार और दो जगह तुलना करें हमने दोनों मूल फ़ाइलें Chrome में `200×160` और `400×320` CSS पिक्सेल पर रेंडर कीं। ब्राउज़र ने हर SVG डिकोड करके परीक्षण आयामों के बराबर आंतरिक आकार वाले कैनवस पर पेंट किया। ब्राउज़र device pixel ratio 2 था; दर्ज नमूने कैनवस बफ़र से हैं, स्क्रीनशॉट डिवाइस पिक्सेल गिनकर नहीं। स्रोत निर्देशांक `(60,30)` और `(60,130)` पर बिंदु मार्ग के अलग सीधे हिस्सों में हैं। क्षैतिज निर्देशांक समान है, इसलिए क्षैतिज ग्रेडिएंट दोनों को समान नमूना रंग देता है। | फ़ाइल | x=60 पर ऊपर का नमूना | x=60 पर नीचे का नमूना | पाथ | एम्बेडेड चित्र | | -------------------- | -------------------- | --------------------- | --- | -------------- | | निर्देशांक ग्रेडिएंट | RGB 202,100,71 | RGB 202,100,71 | 1 | 0 | | बनाई पट्टियाँ | RGB 227,107,44 | RGB 112,75,170 | 8 | 0 | | सपाट ज्यामिति मास्टर | RGB 184,94,57 | RGB 184,94,57 | 1 | 0 | दोनों परीक्षण आकारों पर नमूना जोड़े समान थे, पेंट भीतरी हिस्सों में अल्फ़ा 255 था। स्रोत `(100,80)` का खुला क्षेत्र छहों मामलों में अल्फ़ा शून्य था। यह इन बनाई फ़ाइलों को इस ब्राउज़र में जाँचता है; हर रेंडरर या सभी सीमा पिक्सेल प्रमाणित नहीं करता। पट्टी वाला रेंडर दोनों आकारों पर अलग रंग बदलाव दिखाता है। डिलीवरी आकार में जोड़ जाँचें, विशेषकर निर्यात या एम्बेडिंग के बाद। अलग टुकड़ों में एंटीएलियासिंग, राउंडिंग या बाद के संपादन से सीम दिख सकती हैं। खंड संख्या बढ़ाने से हर रंग कदम छोटा हो सकता है, पर संभालने को अधिक पाथ और सीमाएँ भी बनती हैं। ## कलाकृति विस्तार से पहले प्रभाव चुनें | डिज़ाइन की ज़रूरत | उपयोगी शुरुआत | क्या जाँचना पड़ेगा | | ----------------------------- | --------------------------------------------- | --------------------------------------------------------------- | | रंग पेज की दिशा का अनुसरण करे | एक निर्देशांक ग्रेडिएंट | छोर की जगह और स्रोत सीमा | | इस मार्ग के साथ स्थिर प्रगति | जानबूझकर रंगीन खंड | खंड रंग, स्पर्शरेखीय जोड़ और सीम | | मनमानी वक्र पर चिकनी प्रगति | अलग डिज़ाइन किया अनुमान या दूसरी डिलीवरी विधि | सैंपलिंग, प्रतिच्छेदन, संपादन योग्य ज्यामिति और गंतव्य रेंडरिंग | रैखिक ग्रेडिएंट घुमाने से दिशा बदलती है। दोहराने से रंगों का विस्तार बदलता है। कोई ऑपरेशन उसे इस लौटती केंद्ररेखा के साथ लगातार नहीं मोड़ता। रेडियल ग्रेडिएंट वृत्ताकार संयोजन के अनुकूल हो सकता है, लेकिन वह अपनी पेंट ज्यामिति है, सामान्य मार्ग-दूरी समाधान नहीं। वक्र बाद में बदलें तो खंड साथ संशोधित करें। इच्छित मार्ग तुलना करने के लिए सपाट मास्टर और रंग प्रभाव प्रति अलग रखें। हमारी [relative-path गाइड](https://perfectvector.com/hi/blog/svg-relative-path-commands) नीचे के पाथ कमांड पढ़ने या खिसकाने में मदद कर सकती है। शुरुआती कलाकृति PNG या JPG हो और संपादन योग्य रूपरेखा चाहिए तो [PerfectVector से स्रोत बदलें](https://perfectvector.com/hi/image-to-vector), मिली आकृति व खुले क्षेत्र जाँचें और साफ़ SVG मास्टर रखें। ज्यामिति जाँचने के बाद रंग प्रभाव चुनें या फिर बनाएँ। वेक्टराइज़ेशन सतत छायांकन की सटीक वापसी की गारंटी नहीं देता और न मूल gradient-along-path सुविधा बना देता है। साफ़ मौजूदा SVG में सीधे पेंट और ज्यामिति संपादन चाहिए; [इमेज वेक्टराइज़ेशन गाइड](https://perfectvector.com/hi/blog/what-is-image-vectorization) बताती है कि रास्टर रूपांतरण कब मदद करता है। ## अक्सर पूछे जाने वाले प्रश्न **क्या linearGradient किसी भी मुड़े स्ट्रोक पर चल सकता है?** साधारण linearGradient परिभाषा में पाथ-दूरी सेटिंग नहीं है। उसका निर्देशांक वेक्टर पेंट नियंत्रित करता है। चरणबद्ध उदाहरण अलग मार्ग खंडों को अलग रंग देता है। **क्या अधिक ग्रेडिएंट स्टॉप लौटते रंग ठीक करेंगे?** अधिक स्टॉप ग्रेडिएंट वेक्टर के साथ रंग बदलाव बेहतर कर सकते हैं। उस वेक्टर पर समान स्थान के बिंदु अब भी वही निर्देशांक-आधारित पेंट साझा करते हैं। **क्या पट्टी फ़ाइल में रास्टर चित्र है?** नहीं। हमारे बनाए उदाहरण में आठ पाथ एलिमेंट हैं और इमेज एलिमेंट नहीं। उसमें सतत पाथ-दूरी ग्रेडिएंट के बजाय स्पष्ट रंग कदम भी हैं। **क्या हर ग्रेडिएंट अलग पाथ से बदल देना चाहिए?** डिज़ाइन से मेल खाए तो सरल निर्देशांक ग्रेडिएंट लें। अलग खंड तब उपयोगी हैं जब उनकी प्रगति और संपादन लागत स्वीकार्य हों; डिलीवरी से पहले सीम और गंतव्य रेंडरिंग जाँचें। ## स्रोत 1. [W3C — SVG2 paint servers](https://www.w3.org/TR/SVG2/pservers.html) — ग्रेडिएंट वेक्टर, स्टॉप और निर्देशांक-आधारित पेंट। 2. [MDN — SVG में ग्रेडिएंट](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) — रैखिक और रेडियल ग्रेडिएंट बनाना। 3. [MDN — gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — user-space और बाउंडिंग-बॉक्स निर्देशांक तंत्र। 4. [MDN — path](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) — जाँचे जा सकने वाले पाथ एलिमेंट और डेटा। 5. [MDN — stroke-linecap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) — Butt और गोल स्ट्रोक छोरों का व्यवहार। ## Explore - [Read the HTML article](https://perfectvector.com/hi/blog/svg-gradient-curved-stroke) - [भरी आकृति बदलकर SVG पाथ के कोने गोल करें](https://perfectvector.com/hi/blog/round-svg-path-corners.md) - [SVG टेक्स्ट रैपिंग: tspan से मापी हुई पंक्तियाँ बनाएँ](https://perfectvector.com/hi/blog/svg-text-wrap-tspan.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)