पाथ पर SVG ग्रेडिएंट: मोड़ के आसपास रंग जाँचें

साधारण SVG linearGradient मुड़े पाथ पर दूरी की प्रगति नहीं मापता। वह निर्देशांक तंत्र में ग्रेडिएंट वेक्टर के अनुसार पेंट करता है। रिबन वापस मुड़े तो उस वेक्टर पर समान स्थान वाले दो बिंदुओं को समान रंग मिल सकता है, भले वे रिबन के साथ बहुत दूर हों।

स्थिर डिज़ाइन में मोड़ के साथ रंग आगे बढ़ना चाहिए तो अलग रंगीन खंड बना सकते हैं। इससे क्रम पर नियंत्रण मिलता है, लेकिन ज्यामिति और दिखाई देने वाली रंग सीमाएँ बढ़ती हैं। हमारा मूल उदाहरण उसी बनाए मार्ग पर क्षैतिज ग्रेडिएंट और आठ चुनी पट्टियाँ तुलना करता है। दोनों फ़ाइलों में पाथ हैं और एम्बेडेड चित्र नहीं।

जाँचें कि रंग कहाँ दोहराता है

SVG2 paint-server विनिर्देश रैखिक ग्रेडिएंट को वेक्टर और उसके रंग स्टॉप से परिभाषित करता है। रेडियल ग्रेडिएंट उनकी अपनी वृत्ताकार ज्यामिति से बताता है। कोई परिभाषा मनमाने पाथ को पाथ-दूरी रंग अक्ष नहीं बनाती।

हमारा रिबन ऊपर बाएँ शुरू होकर दाएँ जाता है, अर्धवृत्त पर मुड़ता है और नीचे बाएँ लौटता है। क्षैतिज ग्रेडिएंट बाईं दोनों छोरों को नारंगी और दाएँ मोड़ को बैंगनी करता है। वह वैध निर्देशांक ग्रेडिएंट है; बस “इस मार्ग की शुरुआत से अंत तक रंग बदलें” से अलग डिज़ाइन प्रश्न का उत्तर देता है।

MDN ग्रेडिएंट ट्यूटोरियल अंतिम बिंदु और स्टॉप मॉडल समझाता है। अधिक स्टॉप जोड़ने से निर्देशांक-आधारित रंग क्रम बदलता है। पेंट वक्र का अनुसरण नहीं करने लगता।

निर्देशांक रंग और बनाए रंग खंड

एक साधारण ग्रेडिएंट नियंत्रण के रूप में रखें

पूरी फ़ाइल coordinate.svg सहेजें। पाथ 200×160 viewBox के भीतर 24-इकाई स्ट्रोक लेता है। उसके सीधे हिस्से और दायाँ अर्धवृत्त एक संपादन योग्य केंद्ररेखा बनाते हैं।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<defs><linearGradient id="across" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="170" y2="0" color-interpolation="sRGB"><stop offset="0" stop-color="#e36b2c"/><stop offset="1" stop-color="#704baa"/></linearGradient></defs>
<path d="M30 30 H120 A50 50 0 0 1 120 130 H30" fill="none" stroke="url(#across)" stroke-width="24" stroke-linecap="butt"/>
</svg>

हम स्रोत निर्देशांक तंत्र में ग्रेडिएंट छोर स्पष्ट करने के लिए gradientUnits="userSpaceOnUse" लेते हैं। बाउंडिंग-बॉक्स निर्देशांक करने से छोरों की अभिव्यक्ति बदलेगी; पाथ-दूरी पेंट नहीं आएगा। gradientUnits संदर्भ और हमारी ग्रेडिएंट निर्देशांक गाइड देखें।

पूरा मार्ग एक path एलिमेंट है। अधिक जटिल रंग प्रभाव देना तय करें तब भी इस सरल संस्करण को ज्यामिति मास्टर रखें।

मोड़ के आसपास चरणबद्ध क्रम बनाएँ

नीचे की सामग्री bands.svg सहेजें। वह ऊपर का सीधा हिस्सा दो टुकड़ों, अर्धवृत्त चार आर्क और लौटता सीधा हिस्सा दो टुकड़ों में बाँटती है। रंग मार्ग के क्रम में हैं, ऊपर की शुरुआत में नारंगी से नीचे अंत में बैंगनी तक।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<g fill="none" stroke-width="24" stroke-linecap="butt">
  <path d="M30 30 H75" stroke="#e36b2c"/>
  <path d="M75 30 H120" stroke="#d38d31"/>
  <path d="M120 30 A50 50 0 0 1 155.355339 44.644661" stroke="#b4a747"/>
  <path d="M155.355339 44.644661 A50 50 0 0 1 170 80" stroke="#6fab79"/>
  <path d="M170 80 A50 50 0 0 1 155.355339 115.355339" stroke="#3d9dac"/>
  <path d="M155.355339 115.355339 A50 50 0 0 1 120 130" stroke="#4486b9"/>
  <path d="M120 130 H75" stroke="#5265b2"/>
  <path d="M75 130 H30" stroke="#704baa"/>
</g>
</svg>

ये असमान खंड लंबाइयों वाली हाथ से चुनी आठ पट्टियाँ हैं। पाथ लंबाई की हर इकाई पर समान रंग वृद्धि की गणना नहीं और सतत छायांकन भी नहीं बनातीं। आर्क के गोल किए दशमलव अंतिम बिंदु मूल मार्ग का अनुमान हैं; उदाहरण पिक्सेल-समान बाहरी रेखा का दावा नहीं करता।

path संदर्भ एलिमेंट और उसके पाथ डेटा को बताता है। हर खंड यहाँ स्ट्रोक वाली केंद्ररेखा है, बाहरी रूपरेखा वाला बंद भरण नहीं। गंतव्य को बंद आकृतियाँ चाहिए तो इन स्ट्रोक टुकड़ों को कटिंग रूपरेखा मानने के बजाय ज्यामिति अलग तैयार और जाँचें।

हम stroke-linecap="butt" लेते हैं ताकि सटे टुकड़े अपने अंतिम बिंदुओं से आगे न जाएँ। हर भीतरी खंड पर गोल कैप पड़ोसी रंग पर चढ़ेंगे। सीधे से आर्क के जोड़ में दिशा भी मिलनी चाहिए; हमारी चिकने जोड़ गाइड ज्यामितीय निरंतरता का प्रश्न अलग बताती है।

दो आकार और दो जगह तुलना करें

हमने दोनों मूल फ़ाइलें Chrome में 200×160 और 400×320 CSS पिक्सेल पर रेंडर कीं। ब्राउज़र ने हर SVG डिकोड करके परीक्षण आयामों के बराबर आंतरिक आकार वाले कैनवस पर पेंट किया। ब्राउज़र device pixel ratio 2 था; दर्ज नमूने कैनवस बफ़र से हैं, स्क्रीनशॉट डिवाइस पिक्सेल गिनकर नहीं।

स्रोत निर्देशांक (60,30) और (60,130) पर बिंदु मार्ग के अलग सीधे हिस्सों में हैं। क्षैतिज निर्देशांक समान है, इसलिए क्षैतिज ग्रेडिएंट दोनों को समान नमूना रंग देता है।

दोनों परीक्षण आकारों पर नमूना जोड़े समान थे, पेंट भीतरी हिस्सों में अल्फ़ा 255 था। स्रोत (100,80) का खुला क्षेत्र छहों मामलों में अल्फ़ा शून्य था। यह इन बनाई फ़ाइलों को इस ब्राउज़र में जाँचता है; हर रेंडरर या सभी सीमा पिक्सेल प्रमाणित नहीं करता।

पट्टी वाला रेंडर दोनों आकारों पर अलग रंग बदलाव दिखाता है। डिलीवरी आकार में जोड़ जाँचें, विशेषकर निर्यात या एम्बेडिंग के बाद। अलग टुकड़ों में एंटीएलियासिंग, राउंडिंग या बाद के संपादन से सीम दिख सकती हैं। खंड संख्या बढ़ाने से हर रंग कदम छोटा हो सकता है, पर संभालने को अधिक पाथ और सीमाएँ भी बनती हैं।

कलाकृति विस्तार से पहले प्रभाव चुनें

रैखिक ग्रेडिएंट घुमाने से दिशा बदलती है। दोहराने से रंगों का विस्तार बदलता है। कोई ऑपरेशन उसे इस लौटती केंद्ररेखा के साथ लगातार नहीं मोड़ता। रेडियल ग्रेडिएंट वृत्ताकार संयोजन के अनुकूल हो सकता है, लेकिन वह अपनी पेंट ज्यामिति है, सामान्य मार्ग-दूरी समाधान नहीं।

वक्र बाद में बदलें तो खंड साथ संशोधित करें। इच्छित मार्ग तुलना करने के लिए सपाट मास्टर और रंग प्रभाव प्रति अलग रखें। हमारी relative-path गाइड नीचे के पाथ कमांड पढ़ने या खिसकाने में मदद कर सकती है।

शुरुआती कलाकृति PNG या JPG हो और संपादन योग्य रूपरेखा चाहिए तो PerfectVector से स्रोत बदलें, मिली आकृति व खुले क्षेत्र जाँचें और साफ़ SVG मास्टर रखें। ज्यामिति जाँचने के बाद रंग प्रभाव चुनें या फिर बनाएँ। वेक्टराइज़ेशन सतत छायांकन की सटीक वापसी की गारंटी नहीं देता और न मूल gradient-along-path सुविधा बना देता है। साफ़ मौजूदा SVG में सीधे पेंट और ज्यामिति संपादन चाहिए; इमेज वेक्टराइज़ेशन गाइड बताती है कि रास्टर रूपांतरण कब मदद करता है।

अक्सर पूछे जाने वाले प्रश्न

क्या linearGradient किसी भी मुड़े स्ट्रोक पर चल सकता है? साधारण linearGradient परिभाषा में पाथ-दूरी सेटिंग नहीं है। उसका निर्देशांक वेक्टर पेंट नियंत्रित करता है। चरणबद्ध उदाहरण अलग मार्ग खंडों को अलग रंग देता है।

क्या अधिक ग्रेडिएंट स्टॉप लौटते रंग ठीक करेंगे? अधिक स्टॉप ग्रेडिएंट वेक्टर के साथ रंग बदलाव बेहतर कर सकते हैं। उस वेक्टर पर समान स्थान के बिंदु अब भी वही निर्देशांक-आधारित पेंट साझा करते हैं।

क्या पट्टी फ़ाइल में रास्टर चित्र है? नहीं। हमारे बनाए उदाहरण में आठ पाथ एलिमेंट हैं और इमेज एलिमेंट नहीं। उसमें सतत पाथ-दूरी ग्रेडिएंट के बजाय स्पष्ट रंग कदम भी हैं।

क्या हर ग्रेडिएंट अलग पाथ से बदल देना चाहिए? डिज़ाइन से मेल खाए तो सरल निर्देशांक ग्रेडिएंट लें। अलग खंड तब उपयोगी हैं जब उनकी प्रगति और संपादन लागत स्वीकार्य हों; डिलीवरी से पहले सीम और गंतव्य रेंडरिंग जाँचें।

स्रोत

1. W3C — SVG2 paint servers — ग्रेडिएंट वेक्टर, स्टॉप और निर्देशांक-आधारित पेंट।
2. MDN — SVG में ग्रेडिएंट — रैखिक और रेडियल ग्रेडिएंट बनाना।
3. MDN — gradientUnits — user-space और बाउंडिंग-बॉक्स निर्देशांक तंत्र।
4. MDN — path — जाँचे जा सकने वाले पाथ एलिमेंट और डेटा।
5. MDN — stroke-linecap — Butt और गोल स्ट्रोक छोरों का व्यवहार।