SVG रेडियल ग्रेडिएंट: fx और fy से हाइलाइट खिसकाएँ

कलाकृति खिसकाए बिना SVG रेडियल ग्रेडिएंट की हाइलाइट खिसकाने के लिए उसके <radialGradient> पर fx और fy सेट करें। cx, cy, r और पाथ वैसे ही रखें। fr="0" के साथ फोकल बिंदु रंगों की प्रगति शुरू करता है; अंतिम वृत्त अभी भी बाहरी विस्तार तय करता है। हाइलाइट खिंची लगे तो रूपरेखा संपादित करने से पहले gradientUnits और आकृति का बाउंडिंग बॉक्स जाँचें।

यह गाइड खुले भाग वाला हमारा मूल चौड़ा षट्कोण बैज लेती है। हम केंद्रित और खिसकी हाइलाइट तुलना करते हैं, फिर पेंट की दो चुनी परिभाषाएँ: ऑब्जेक्ट-सापेक्ष दीर्घवृत्त और user-space वृत्त। SVG सीधे कोड में बनाया गया है। कोई ट्रेसिंग सेवा या एडिटर इस नमूने का निर्माता नहीं है।

फोकस को अंतिम वृत्त से अलग समझें

रेडियल ग्रेडिएंट में शुरुआती और अंतिम वृत्त होते हैं। इस उदाहरण में fr="0" शुरुआती वृत्त को बिंदु कर देता है। fx और fy वह बिंदु रखते हैं; cx, cy और r अंतिम वृत्त तय करते हैं। फोकल निर्देशांक न सेट हों तो सामान्यतः संबंधित केंद्र निर्देशांक लेते हैं। MDN का radialGradient संदर्भ ये गुण और सामान्य मान बताता है।

दोनों संपादन अलग काम समझें:

क्षैतिज फोकल निर्देशांक fx और लंबवत fy है। दोनों बदलने से शुरुआती बिंदु तिरछा जाता है। पाथ के बिंदु या उसका खुला भाग नहीं खिसकते।

खिसकी हाइलाइट वाला पूरा SVG कॉपी करें

इसे emblem.svg सहेजकर ब्राउज़र में खोलें। बाहरी चित्र या स्टाइलशीट पर निर्भरता नहीं है।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="-20 0 200 120">
  <defs>
    <radialGradient id="highlight" gradientUnits="objectBoundingBox"
                    cx=".5" cy=".5" r=".6" fx=".22" fy=".18" fr="0" spreadMethod="pad">
      <stop offset="0" stop-color="#fff1d8"/>
      <stop offset=".45" stop-color="#ed805f"/>
      <stop offset="1" stop-color="#6f284c"/>
    </radialGradient>
  </defs>
  <path d="M20 20 H140 L160 60 L140 100 H20 L0 60 Z M50 38 H110 L130 60 L110 82 H50 L30 60 Z" fill="url(#highlight)" fill-rule="evenodd"/>
</svg>

केंद्रित नियंत्रण बनाने के लिए केवल fx=".22" fy=".18" को fx=".5" fy=".5" करें। बाकी गुण और d की दोनों रूपरेखाएँ न बदलें।

बाहरी रूपरेखा x=0 से 160 और y=20 से 100 तक है। दूसरी रूपरेखा खुला भाग तय करती है। fill-rule="evenodd" उसे बिना पेंट रखता है; ग्रेडिएंट खिसकाने से वह नहीं भरता। MDN का fill-rule संदर्भ इस compound पाथ का crossing नियम समझाता है।

केंद्रित फोकस खुले भाग में है, इसलिए सबसे चमकीला बिंदु स्वयं अदृश्य है। फिर भी रिंग पर आसपास रंग प्रगति दिखती है। खिसका फोकस ऊपर-बाईं ठोस पट्टी पर आता है जहाँ सबसे हल्का स्टॉप दिखता है। निर्देशांक बदलने पर कम फ़र्क लगे तो यह अंतर मदद करता है: फोकस चिह्न के पारदर्शी हिस्से के पीछे हो सकता है।

चौड़े बैज में अंडाकार रंग मिश्रण क्यों बनता है

gradientUnits="objectBoundingBox" में निर्देशांक पेंट किए ऑब्जेक्ट की सीमा बताते हैं। हमारे बैज की सीमा 160 × 80 है, भले SVG कैनवस 200 × 120 हो। सामान्यीकृत वृत्त उस गैर-वर्गाकार बॉक्स में मैप होकर दीर्घवृत्त बनता है। MDN का gradientUnits संदर्भ यह मैपिंग बताता है।

यहाँ cx=".5" cy=".5", (80, 60) पर मैप होते हैं। त्रिज्या .6 क्षैतिज और लंबवत त्रिज्याओं 96 व 48 में बदलती है। खिसका फोकस यहाँ मैप होता है:

x = 0 + .22 × 160 = 35.2
y = 20 + .18 × 80 = 34.4

बिना ट्रांसफ़ॉर्म के इस SVG में अंतिम क्षेत्र वृत्ताकार करने के लिए ग्रेडिएंट के निर्देशांक गुण इनसे बदलें:

gradientUnits="userSpaceOnUse"
cx="80" cy="60" r="64"
fx="35.2" fy="34.4" fr="0" spreadMethod="pad"

उसका केंद्रित नियंत्रण fx="80" fy="60" लेता है। अब दोनों दिशाओं में त्रिज्या 64 उपयोगकर्ता इकाई है। यह 96 × 48 दीर्घवृत्त से अलग चुना अंतिम क्षेत्र है। हमने निर्देशांक परिभाषा और भौतिक त्रिज्या दोनों बदले; यह तुलना केवल यूनिट बदलना अलग नहीं करती। हर केंद्रित/खिसके जोड़े में सिर्फ़ फोकल निर्देशांक बदलते हैं।

हर आकृति के अनुपात के साथ मिश्रण चाहिए तो ऑब्जेक्ट-सापेक्ष पेंट लें। उसकी जगह और वृत्ताकार विस्तार कलाकृति निर्देशांक से जुड़े हों तो स्पष्ट user-space संख्याएँ लें। अलग लोगो पाथ पर साझा मिश्रण के लिए SVG ग्रेडिएंट यूनिट देखें।

मूल ब्राउज़र तुलना ने क्या दिखाया

हमने बनाए चारों SVG Chrome में खोले और प्रत्येक 100 × 60 व 300 × 180 CSS पिक्सेल पर दिखाया। बड़ा संस्करण ऊपर-बाईं हाइलाइट जाँचना आसान करता था। वही खिसकाव छोटे आकार में भी दिखा और हर नमूने का खुला भाग पारदर्शी रहा।

ब्राउज़र स्रोत रिपोर्ट में चारों फ़ाइलों में एक पाथ, कोई इमेज एलिमेंट नहीं, समान d और वही 160 × 80 पाथ सीमा मिली। स्रोत कैनवस आकार पर अलग पिक्सेल रीडिंग ने बदला पेंट पुष्ट किया:

ऊपर-बायाँ नमूना कलाकृति निर्देशांक (35, 30) पर है; खुले भाग का नमूना (80, 60) पर। ये अवलोकन इस स्रोत और ब्राउज़र सत्र के हैं। दूसरे रेंडरर का आउटपुट या एडिटर का आयात व्यवहार स्थापित नहीं करते।

फोकस और पेंट सीमा

चिह्न समायोजित करते समय फोकस भीतर रखें

भीतरी फोकस और fr="0" से शुरू करें। सामान्यीकृत निर्देशांकों में केंद्र से खिसके बिंदु की दूरी लगभग .425 है, हमारी .6 त्रिज्या से कम। User-space संस्करण में दूरी लगभग 51.6 है, 64 से कम। दोनों चुनाव शुरुआती बिंदु को उसी निर्देशांक तंत्र में अंतिम वृत्त के भीतर रखते हैं जिसमें वह वृत्त परिभाषित है।

पुरानी व्याख्याएँ कह सकती हैं कि बाहरी फोकस हमेशा अंतिम वृत्त तक सीमित कर दिया जाता है। SVG 2 शुरुआती वृत्त को बाहर होने देता है और अलग व्यवहार तय करता है, जिसमें ग्रेडिएंट कोन के बाहर बिना पेंट क्षेत्र भी हैं। SVG 2 रेडियल ग्रेडिएंट विनिर्देश बदलाव समझाता है। यह उदाहरण भीतरी बिंदु लेता है; हमने ब्राउज़र में बाहरी फोकस रेंडरिंग नहीं जाँची।

जगह जाँचते समय spreadMethod="pad" रखें। ग्रेडिएंट विस्तार के बाहर pad अंतिम स्टॉप का रंग लेता है; repeat और reflect दोहराव लाते हैं जो फोकस तुलना धुँधली कर सकता है। MDN का spreadMethod संदर्भ विकल्प बताता है।

डिलीवरी से पहले SVG दिखाने वाले परिवेश में तीन बातें जाँचें:

1. वास्तविक प्रदर्शन आकार पर हाइलाइट इच्छित ठोस पट्टी पर है।
2. खुला भाग पारदर्शी है और पाथ डेटा अभी मास्टर से मिलता है।
3. चुना वृत्त या दीर्घवृत्त चिह्न के अनुपात के अनुकूल है।

निर्यात के बाद रंग बदलें तो SVG रंग निर्यात के बाद क्यों बदलते हैं से पेंट और डिलीवरी संदर्भ जाँचें। फोकल बिंदु खिसकाना जगह का संपादन है, इसलिए साथ में स्टॉप रंग बदलने से तुलना समझना कठिन होता है।

ज्यामिति पुनर्प्राप्ति को पेंट डिज़ाइन से अलग रखें

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

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

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

SVG रेडियल ग्रेडिएंट की हाइलाइट कैसे खिसकाएँ? radialGradient पर स्पष्ट fx और fy सेट करें। बदलाव तुलना करते समय cx, cy, r, स्टॉप और पाथ स्थिर रखें। fr शून्य हो तो वे फोकल निर्देशांक रंग प्रगति का शुरुआती बिंदु रखते हैं।

मेरे SVG में रेडियल ग्रेडिएंट अंडाकार क्यों दिखता है? objectBoundingBox यूनिट में सामान्यीकृत वृत्त पेंट किए ऑब्जेक्ट की सीमा से मैप होता है। गैर-वर्गाकार सीमा दीर्घवृत्त बनाती है। बिना ट्रांसफ़ॉर्म SVG में स्पष्ट userSpaceOnUse निर्देशांक कलाकृति इकाइयों में वृत्ताकार क्षेत्र तय कर सकते हैं।

फोकल बिंदु खिसकाने से लोगो का खुला भाग भर जाएगा? नहीं। Compound पाथ और उसका भरण नियम खुला भाग तय करते हैं। यह उदाहरण evenodd लेता है और हर नमूने में वही पाथ रखता है; फोकस खिसकने पर खुला भाग पारदर्शी रहता है।

क्या वेक्टराइज़ेशन मूल ग्रेडिएंट के फोकल निर्देशांक वापस ला सकता है? रास्टर चित्र मूल SVG ग्रेडिएंट पैरामीटर नहीं रखता। ज़रूरत हो तो रूपरेखाएँ प्राप्त कर जाँचें, फिर पेंट दोबारा बनाएँ और इच्छित प्रदर्शन परिवेश में हाइलाइट जाँचें।

स्रोत

1. MDN radialGradient — शुरुआती/अंतिम वृत्त के गुण और सामान्य मान।
2. MDN fx — क्षैतिज फोकल निर्देशांक का अर्थ।
3. MDN fy — लंबवत फोकल निर्देशांक का अर्थ।
4. MDN fill-rule — खुले भाग का even-odd भरण व्यवहार।
5. MDN gradientUnits — ऑब्जेक्ट सीमा, user space और अंडाकार मैपिंग।
6. SVG 2 रेडियल ग्रेडिएंट — शुरुआती वृत्त ज्यामिति और बाहरी फोकस विनिर्देश बदलाव।
7. MDN spreadMethod — Pad, repeat और reflect व्यवहार।